javascript - jQuery 单击事件不适用于动态添加的元素

Question

我一直在尝试在这段代码上使用 jQuery，但它没有响应。我动态地尝试将一些行添加到 HTML 表格的末尾，并且还添加了一个取消按钮。取消按钮上的点击功能似乎不起作用。

我无法在这里发布完整的代码，所以我添加了一个指向 jsFiddle 的链接.

部分 JavaScript 代码:

$('#myTable tbody:last').after('<tbody class="newrow"><tr><td> <input  type="text" class="app"></td><td><input type="text" class="env"> |\n\
 </td><td><input type="text" class="region"> | </td><td><input type="text"  class="url"> | \n\
</td><td><button class="cancel">X</button></td>\n\
</tr></tbody>');          
}

$('.cancel').on('click', function() {
    alert();
   //$(this).closest('tbody').fadeOut(2000); 
});

Answer 1

您需要使用委托(delegate)事件来捕获动态添加元素的点击事件。

实现评论中建议的更改后，将您的点击处理程序更改为此

$('body').on('click','.cancel', function() {
    console.log($(this));
    //$(this).closest('tbody').fadeOut(2000); 
});

这将在浏览器控制台中输出已单击的按钮，它也应该适用于新元素。