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

Question

起初，我试图使用.submit()，但读到它不能处理动态生成的元素(在DOM准备好之后)。所以我试了一下.on()。它在一个脚本中工作，但是我很难让它在点击按钮时工作。

表单是动态放置的。我使用引导表将JSON加载到表中，表单是传递的JSON的一部分。每页上有多达100份表格。

这是我的表格和表格的结构：

<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").on("click", "button", function(e)...

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

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

Answer 2

以下是两个观察结果

1. "add_tag“是'id'，而不是'class‘

变出

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

至

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

1. 同意其他人使用事件授权的答复/评论。

变出

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

至

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