jQuery onclick无法在动态插入的HTML元素上触发吗? [英] jQuery onclick not firing on dynamically inserted HTML elements?

问题描述

我的onclick事件有效. 但是，当onclick事件在动态HTML上时，它将不再起作用.如:没有任何反应.

My onclick event works. However, when that onclick event is on dynamic HTML, it no longer works. As in: nothing happens.

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

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

I'm then dynamically adding this HTML to a page:

<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?

However, when I then click on "(add your data)" nothing happens. When I have the HTML staticly in my page, this toggling of the 'guestdetails' div does work. It seems that there is no event attached to dynamically inserted HTML?

更新:

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

The new dynamic HTML I'm inserting i a row in an existing table. The other rows already have events attached to the onclick events, like:

$("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，而是在要插入的元素周围添加了包装器:

Since a user can insert more than 1 row, I didn't use the id, but rather added a wrapper around the element I'm inserting:

，然后在ready()函数中:

and then in ready() function:

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

但是，第一个问题是，显然当我将一个div包裹在tr标记周围时，所有tr和td标记都从插入的HTML中删除了！ 另外，当我单击跨度查看guestdetails时，什么也没发生.

The first problem however, is that apparently when I wrap a div around a tr tag, all tr and td tags are removed from the inserted HTML! Also when I click the span to view guestdetails nothing happens.

推荐答案

执行以下操作:

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

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

where #wrapper is a static element in which you add the dynamic links.

因此，您有一个包装器，该包装器被硬编码为HTML源代码:

So, you have a wrapper which is hard-coded into the HTML source code:

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

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

and you fill it with dynamic content. The idea is to delegate the events to that wrapper, instead of binding handlers directly on the dynamic elements.

这篇关于jQuery onclick无法在动态插入的HTML元素上触发吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！