Javascript 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();
});

$（'#btnAdd'）。单击（函数（）{
var newTr=''；
$（“#列”）.append（newTr）；
});
$（'.btnDel'）。单击（函数（）{
警惕（‘嘿’）；
console.log（'test'）；
var行=$（此）.tr；
警报（世界其他地区）；
row.remove（）；
});

您需要使用事件委派：

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

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

我们监听

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

最后，不要重复使用ID值。
您需要为动态添加的html元素使用事件委派。如果可以，您可以将事件委托给动态添加元素的父元素
，也可以委托给
文档

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

    row.remove();
});


委派事件的优点是，它们可以从中处理事件
以后添加到文档中的子元素。通过
选择一个元素，该元素保证在
已附加委派事件处理程序，您可以使用委派事件
避免频繁附加和删除事件处理程序

要进一步理解，请阅读本文
使用
on（）

这会奏效的

    $('#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();
     });



      });

$（'#btnAdd'）。单击（函数（）{
var newTr=
';
$（“#列”）.append（newTr）；
$（'.btnDel'）。单击（函数（）{
警惕（‘嘿’）；
console.log（'test'）；
var行=$（此）.tr；
警报（世界其他地区）；
row.remove（）；
});
});
非常有魅力，感谢您深入了解为什么这样做不起作用，而不是给我一个工作示例。从身份证上看，我不打算离开那里。
    $('#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();
     });



      });