jQuery onclick没有触发动态插入的HTML元素？

Question

我的onclick活动有效.但是,当onclick事件在动态HTML上时,它不再有效.如:没有任何反应.

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

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

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

然而,第一个问题是,当我在tr标签周围包装div时,所有tr和td标签都会从插入的HTML中删除!此外,当我单击跨度查看guestdetails时没有任何反应.

Answer 1

做这个:

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

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

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

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

并用动态内容填充它.我们的想法是将事件委托给该包装器,而不是直接在动态元素上绑定处理程序.

Answer 2

使用.on()附加动态绑定html元素的事件处理程序.这里是文档的链接http://api.jquery.com/on/

写这样的东西

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

或类似的东西.

          $(document).on( 'click', 'tag_name', function () { ... });

Answer 3

jQuery.on()用于绑定动态插入的HTML元素上的任何事件.像这样使用它:

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