jQuery的单击事件不工作的动态领域[复制](jquery click event not wor

可能重复：
jQuery的-单击事件不起作用动态生成的元素

我只是有一个可点击添加按钮，增加了新的表行。 该表中的行包括删除按钮。 我注意到，当我动态地添加新行按钮不会触发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:

您需要使用上（）事件代表团动态添加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 = '<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 event not working for dynamic fields [duplicate]