jquery添加事件监听器dynamic添加元素

所以现在，我明白为了把一个事件监听器附加到一个dynamic添加的元素上，你必须在添加元素后重新定义监听器。 有没有办法绕过这个，所以你不必执行一个额外的代码块？

Answer 1

使用.on()你可以定义你的函数一次，它会执行任何dynamic添加的元素。

例如

 $('#staticDiv').on('click', 'yourSelector', function() { //do something }); 

Answer 2

 $(document).on('click', 'selector', handler); 

其中click是一个事件名称， handler是一个事件处理程序，就像引用一个函数或匿名函数function() {}

PS：如果您知道要添加dynamic元素的特定节点，您可以指定它而不是document 。

Answer 3

当添加jQuery插件调用新元素，你可以做如下：

 $('<div>...</div>').hoverCard(function(){...}).appendTo(...) 

Answer 4

您正在dynamic生成这些元素，所以应用于页面加载的任何侦听器都将不可用。 我用正确的方法编辑了你的小提琴。 基本上，jQuery通过将其附加到父元素并将其向下传播到正确的dynamic创build的元素来为将来的绑定保存事件。

 $('#musics').on('change', '#want',function(e) { $(this).closest('.from-group').val(($('#want').is(':checked')) ? "yes" : "no"); var ans=$(this).val(); console.log(($('#want').is(':checked'))); }); 

http://jsfiddle.net/swoogie/1rkhn7ek/39/