jQuery onclick 不会触发动态插入的 HTML 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18831568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery onclick not firing on dynamically inserted HTML elements?
提问by Flo
My onclick event works. However, when that onclick event is on dynamic HTML, it no longer works. As in: nothing happens.
我的 onclick 事件有效。但是，当 onclick 事件发生在动态 HTML 上时，它就不再起作用了。如：什么都没有发生。
$(document).ready(function () {
$("#guestlist .viewguestdetails").click(function () {
$(".guestdetails[data-id='18']").toggle();
});
});
I'm then dynamically adding this HTML to a page:
然后我动态地将此 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>
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 时，'guestdetails' div 的这种切换确实有效。似乎没有附加到动态插入的 HTML 的事件？
UPDATE:
更新：
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:
我在现有表中插入 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');
}
}
});
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:
由于用户可以插入多于 1 行，我没有使用 id，而是在我插入的元素周围添加了一个包装器：
and then in ready() function:
然后在 ready() 函数中：
$('.newrow_wrapper').on('click', 'span', function () {
$(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle();
});
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.
然而，第一个问题是，显然当我在 tr 标签周围包裹一个 div 时，所有 tr 和 td 标签都会从插入的 HTML 中删除！此外，当我单击跨度查看客人详细信息时，什么也没有发生。
回答by underscore
Do this:
做这个：
$( '#wrapper' ).on( 'click', 'a', function () { ... });
where #wrapper is a static element in which you add the dynamic links.
其中#wrapper 是一个静态元素，您可以在其中添加动态链接。
So, you have a wrapper which is hard-coded into the HTML source code:
因此，您有一个硬编码到 HTML 源代码中的包装器：
<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.
然后用动态内容填充它。这个想法是将事件委托给该包装器，而不是直接在动态元素上绑定处理程序。
回答by Gourav
Use .on() to attach event handlers which dynamically binds the html elements.Here is the link for documentation http://api.jquery.com/on/
使用 .on() 来附加动态绑定 html 元素的事件处理程序。这是文档的链接http://api.jquery.com/on/
write something like this
写这样的东西
$( '#someid' ).on( 'click', function () { ... });
or something like this.
或类似的东西。
$(document).on( 'click', 'tag_name', function () { ... });
回答by Nishu Tayal
jQuery.on()is used to bind any event on dynamically inserted HTML elements. Use it like this :
jQuery.on()用于绑定动态插入的 HTML 元素上的任何事件。像这样使用它：
$(document).ready(function () {
$(document).on('click',"#guestlist .viewguestdetails",function () {
$(".guestdetails[data-id='18']").toggle();
});
});
