jQuery onclick 不会在动态插入的 HTML 元素上触发？

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 9 年前。

我的 onclick 事件有效。但是，当该 onclick 事件位于动态 HTML 上时，它就不再起作用。就像:什么也没发生。

$(document).ready(function () {
    $("#guestlist .viewguestdetails").click(function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});

然后我动态地将此 HTML 添加到页面中:

<div id="guestlist">    
    <span class="completeguestdetails" data-id="18">(add your data)</span>  
        <div class="guestdetails" data-id="18" style="display: none;">
            some data
        </div>
</div>

但是，当我单击“(添加您的数据)”时，什么也没有发生。当我的页面中有静态 HTML 时，“guestdetails”div 的这种切换确实有效。动态插入的 HTML 似乎没有附加任何事件？

更新:

我正在现有表格中插入一行新的动态 HTML。其他行已经有附加到 onclick 事件的事件，例如:

$("span.guestattendance").click(function () {
    if ($(this).hasClass('checkbox-on')) {
        $(this).removeClass('checkbox-on').addClass('checkbox-off');
        $("#guestday").removeClass('checkbox-on').addClass('checkbox-off');
    }
    else {
        $(this).removeClass('checkbox-off').addClass('checkbox-on');            
        if ($("#guestceremony").hasClass('checkbox-on') && $("#guestreception").hasClass('checkbox-on') &&
        $("#guestdiner").hasClass('checkbox-on') && $("#guestparty").hasClass('checkbox-on')) {
            $("#guestday").removeClass('checkbox-off').addClass('checkbox-on');
        }
    }
});

由于用户可以插入超过 1 行，因此我没有使用 id，而是在我要插入的元素周围添加了一个包装器:

然后在ready()函数中:

$('.newrow_wrapper').on('click', 'span', function () {
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle();
});

然而，第一个问题是，显然当我将 div 包裹在 tr 标签周围时，所有 tr 和 td 标签都会从插入的 HTML 中删除!此外，当我单击跨度查看客人详细信息时，什么也没有发生。

Answer 1

这样做:

 $( '#wrapper' ).on( 'click', 'a', function () { ... });

其中 #wrapper 是一个静态元素，您可以在其中添加动态链接。

因此，您有一个硬编码到 HTML 源代码中的包装器:

<div id="wrapper"></div>

然后你用动态内容填充它。这个想法是将事件委托(delegate)给该包装器，而不是将处理程序直接绑定(bind)到动态元素上。