9

可能重复：
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();
});
4

4 回答 4

16

您需要使用事件委托：

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

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

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

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

于 2013-01-16T04:57:44.357 回答
7

您需要使用on()进行动态添加的 html 元素的事件委托。如果可以的话，您可以将事件委托给parent动态添加元素的元素，或者您可以委托给document.

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

    row.remove();
});

委托活动

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

要进一步理解，请阅读这篇文章理解事件委托

于 2013-01-16T04:58:03.793 回答
3

利用on()

$(document).on('click', '.btnDel', function(){
  //your code
})
于 2013-01-16T04:58:23.517 回答
0

这将起作用

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



      });
于 2013-01-16T05:51:27.413 回答