Question

可能重复：
jQuery - Click event doesn’t work on dynamically generated elements

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

使用Javascript：

$('#btnAdd').click(function () {

        var newTr = '<tr><td><input id="column_0" name="column[0]" style="width:40%;" type="text" /> <img alt="Delete-icon24x24" class="btnDel clickable" id="" src="/assets/delete-icon24x24.png" /></td></tr>';
        $('#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();
});

<强> Delegated events

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

如需进一步了解，请阅读本文Understanding Event Delegation

Answer 3

使用on()

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

Answer 4

这将有效

    $('#btnAdd').click(function () {

       var newTr = '<tr><td><input id="column_0" 
       name="column[0]"style="width:40%;"type="text" />
      <img alt="Delete-icon24x24" class="btnDel clickable" id="" 
       src="/assets/delete- icon24x24.png" /></td></tr>';
    $('#columns').append(newTr);

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

       row.remove();
     });



      });

jquery click事件不适用于动态字段

4 个答案: