jQuery onclick不动态插入HTML元素？

我的onclick事件有效。但是，当onclick事件处于动态HTML中时，它不再有效。如：没有任何反应。jQuery 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？

UPDATE：

新的动态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，而是加入我的元素周围的包装插入：

，然后在准备好（）函数：

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

然而，第一个问题是，显然，当我环绕一个tr标签股利，所有的t从插入的HTML中删除r和td标签！另外，当我点击跨度来查看guestdetails没有任何反应。

来源

2013-09-16 Flo

这样做：

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

其中#wrapper指定在其中添加动态链接的静态元素。

所以，你有一个包装物，硬编码到HTML源代码：

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

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

来源

2013-09-16 15:21:05 underscore

我试过了，看到我更新后的帖子。但它不起作用......我错过了什么？ – Flo

有用的答案，保存我的时间 –

使用。对（）附加的事件处理程序可以动态绑定的HTML elements.Here是链接文档http://api.jquery.com/on/

写这样的事情

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

或这样的事情。

  $(document).on('click', 'tag_name', function() { ... });

来源

2013-09-16 15:27:12 Gourav

谢谢...作品像一个魅力.... :) –

“on”点击绑定此事件的任何未来元素匹配的'tag_name'。这就是为什么这是比较特殊的“点击”，只有事件绑定到当前元素。无论何时您需要为动态加载的元素绑定事件，请使用“on”。 – Dhanuka777

只是第二个为我工作。 – Golnar

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

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

来源

2013-09-16 15:31:09

jQuery onclick不动态插入HTML元素？

回答

相关问题