我的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时，什么也没有发生。
做这个：
$( '#wrapper' ).on( 'click', 'a', function () { ... });
其中#wrapper是静态元素，您可以在其中添加动态链接。
因此，您有一个包装器，该包装器被硬编码到HTML源代码中：
<div id="wrapper"></div>
然后用动态内容填充它。想法是将事件委托给该包装器，而不是直接在动态元素上绑定处理程序。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句