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

参见英文答案 > Event binding on dynamically created elements?18
我的活动工作.
但是,当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');
        }
    }
});

由于用户可以插入多行,所以我没有使用id,而是在我插入的元素周围添加了一个包装：

然后在ready()函数中：

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

然而,第一个问题是,当我围绕一个tr标签包装一个div时,所有的tr和td标签都将从插入的HTML中删除！
此外,当我单击该范围来查看guestdetails没有任何反应.

解决方法

做这个：

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

其中#wrapper是您添加动态链接的静态元素.

所以,你有一个硬编码到HTML源代码的包装器：

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

并填写动态内容.这个想法是将事件委托给该包装器,而不是直接在动态元素上绑定处理程序.

原文地址：https://www.jb51.cc/jquery/176763.html