jquery点击事件不适用于动态字段

可能重复：
jQuery – Click事件不适用于动态生成的元素

我只有一个可点击的添加按钮，可以添加新的表格行。 表行包括删除按钮。 我注意到，当我动态添加新行时，按钮不会触发click事件，但如果页面加载时该按钮存在，那么它可以正常工作。 我怎么能纠正这个？

使用Javascript：

$('#btnAdd').click(function () { var newTr = ' '; $('#columns').append(newTr); }); $('.btnDel').click(function () { alert('hey'); console.log('test'); var row = $(this).closest("tr"); alert(row); row.remove(); }); 

Answer 1

您需要使用事件委派：

 $("table").on("click", ".btnDel", function () { /* Respond to click here */ }); 

原因是您无法将处理程序绑定到DOM中当前不存在的项目。 但是，您可以将处理程序绑定到委托目标（将保留在DOM中的父元素）。 点击将冒泡DOM，最终到达委托目标。

我们会听取table上的点击，并评估它们是否来自.btnDel元素。 现在，这将响应加载页面时加载的.btnDel元素的点击次数，以及稍后动态添加的点击次数。

最后，不要重复使用ID值。

Answer 2

您需要使用on（）为动态添加的html元素进行事件委派。 如果可以，您可以将事件委托给动态添加元素的parent元素，也可以委托给document 。

 $(document).on('click', '.btnDel', function () { alert('hey'); console.log('test'); var row = $(this).closest("tr"); alert(row); row.remove(); }); 

委托活动

委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。 通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

为了进一步理解，请阅读本文了解事件委派

Answer 3

用于on()

 $(document).on('click', '.btnDel', function(){ //your code }) 

Answer 4

这会奏效

  $('#btnAdd').click(function () { var newTr = ' '; $('#columns').append(newTr); $('.btnDel').click(function () { alert('hey'); console.log('test'); var row = $(this).closest("tr"); alert(row); row.remove(); }); });