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

Question

可能重复:
jQuery - Click事件对动态生成的元素不起作用

我只有一个可点击的添加按钮,可以添加新的表格行.表行包括删除按钮.我注意到,当我动态添加新行时,按钮不会触发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();
});

委托活动

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

为了进一步理解,请阅读本文了解事件委派