jQuery .on() 动态创建的表单

Question

起初我尝试使用 .submit() 但读到它不适用于动态生成的元素（在 DOM 准备好之后）。所以我尝试了.on()。它在一个脚本中工作，但我无法让它与按钮点击一起工作。

表单是动态放置的。我正在使用 bootstrap-tables 将 JSON 加载到 table 中，表单是通过的 JSON 的一部分。每页最多有 100 个表格。

这是我的表单及其所在的 table 结构：

<table id="report-table">
    <tbody>
        <tr>
            <td></td><td></td><td></td>
            <td>
                <form>
                    <input type="text" />
                    <button type="submit" id="add_tag">Add Tag</button>
                </form>
            </td>
        </tr>
    </tbody>
</table>

我试过：

//I'm assuming this didn't work because the form was generated using JS
$(".add_tag").click( function(e) {
    e.preventDefault();
    alert("button clicked");
});

//Same reasoning as above
$("form").submit( function(e) {
    e.preventDefault();
    alert("button clicked");
});

//Not sure why this worn't work
$( "#report-table tbody tr td form button" ).on( "click", function(e) {
    e.preventDefault(); //this doesn't even work.
    alert("button clicked");
});

有什么想法吗？

Answer 1

要回答评论中的问题，不同之处在于处理程序需要附加到页面实际加载时 DOM 中的内容。由于您的按钮最初不存在，因此无法直接向其注册处理程序，除非您在按钮创建并添加到 DOM 之后添加处理程序。

不过，由于您有很多这样的按钮，事件委托对您来说会更高效。不是注册 100 个左右的单独处理程序，每个按钮一个，整个#report-table 你只有一个。

此方法利用事件 "bubble" 通过调度事件的元素的所有祖先（父元素和父元素的父元素）这一事实。事件对象包含对派发它的原始元素的引用。

因此，当您使用委托模式时：

$("#report-table").on("click", "button", function(e)...

report-table 元素在事件冒泡后获得点击。然后它读取事件对象并检查调度事件的元素是否与 on 方法的第二个参数中的元素匹配，在本例中是您的按钮。如果匹配，则运行回调函数，如果不匹配，则不运行。

正如我在评论中所说，jquery.com 网站上有一个非常好的且更详细的解释。

Answer 2

这里有两个观察结果

"add_tag" 是 'id'，不是 'class'

变化自

$(".add_tag").click( function(e) {
    e.preventDefault();
    alert("button clicked");
});

到

$("#add_tag").click( function(e) {
    e.preventDefault();
    alert("button clicked");
});

同意其他人answer/comments使用事件委托。

从

更改

$( "#report-table tbody tr td form button" ).on( "click", function(e) {

到

$("#report-table").on("click", "button", function(e) {

jQuery .on() 动态创建的表单

jQuery .on() with dynamically created forms

jquery

onclick

listener