17

我的 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 的事件？

更新：

我在现有表中插入 ia 行的新动态 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 中删除！此外，当我单击跨度查看 guestdetails 时，什么也没有发生。

4

3 回答 3

37

做这个：

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

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

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

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

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

于 2013-09-16T15:21:05.200 回答
17

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

写这样的东西

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

或类似的东西。

          $(document).on( 'click', 'tag_name', function () { ... });
于 2013-09-16T15:27:12.700 回答
5

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

$(document).ready(function () {
    $(document).on('click',"#guestlist .viewguestdetails",function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});
于 2013-09-16T15:31:09.847 回答