Question

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

然而，第一个问题是，当我在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();
    });
});

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

3 个答案: