jQuery事件动态添加元素不激活

Question

我一直在寻找如何做到这一点，并且我已经看到了很多选项（其中大多数已被弃用），但我尝试过的任何工作都没有。

我有一个文件上传脚本，可动态添加表行，一个<td>有一些<button>元素，我需要在点击时做一些Ajax工作，但我似乎无法做到这一点任何东西。

这是<td>，其中包含添加到DOM的按钮：

<td class="filedelete">
    <button class="btn btn-danger delete">
        <i class="icon-trash icon-white"></i> Delete
    </button>
</td>

这是我现在正在尝试的jQuery：

$(".delete").on("click", function(event){
    console.log("clicked");
});

.on我应该使用什么？我做错了什么？

Answer 1

修改你的代码，使事件处理程序绑定到包含元素（可能是父<table>或另一个包含静态元素），如下所示：

$("#containing_element").on("click", ".delete", function(event){
    console.log("clicked");
});

从.delete触发的点击事件将会冒泡并被包含元素捕获。