jquery点击事件不适用于动态字段[重复]答案

【问题标题】：jquery click event not working for dynamic fields [duplicate]jquery点击事件不适用于动态字段[重复]
【发布时间】：2012-12-30 08:55:51
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery onclick

【解决方案1】：

您需要使用事件委托：

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

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

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

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

【讨论】：

工作就像一个魅力，感谢您深入了解为什么这不起作用，而不是仅仅给我一个工作示例。看id就明白了，我不是打算离开那里的。

【解决方案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

【讨论】：

【解决方案3】：

使用on()

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

【讨论】：

【解决方案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();
     });



      });

【讨论】：