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

我的onclick活动有效。 但是，当onclick事件在动态HTML上时，它不再有效。 如：没有任何反应。

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

然后，我将此HTML动态添加到页面：

 
 (add your data) 
 some data 
  

但是，当我点击“（添加您的数据）”时，没有任何反应。 当我在我的页面中静态地使用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源代码中的包装器：

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

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