Jquery将事件侦听器添加到动态添加的元素

所以现在，我明白为了将一个事件侦听器附加到动态添加的元素，您必须在添加元素后重新定义侦听器。有什么办法可以绕过这个，所以你不必执行一整块额外的代码？Jquery将事件侦听器添加到动态添加的元素

2012-08-22 Wiz

香草JS的解决方案：http://stackoverflow.com/a/27373951/1385441 –

127

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

例如

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

来源

2012-08-22 01:48:21 Jack

有没有办法在不在原生jQuery。即我需要使用它与一个Jquery插件。 – Wiz

@Wiz：你可以绑定到任何事件 – zerkms

@zerkms嗯，我试图用Hovercard和$（'。class'）。（'hovercard'，function（）{}）;当通常的语法是$（'。class'）。hovercard（function（）{}）; – Wiz

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

凡click是一个事件的名称，handler是事件处理程序，类似的参考函数或匿名函数function() {}

PS：如果你知道你要添加动态元素的特定节点 - 你可以指定它而不是document。

来源

2012-08-22 01:47:54 zerkms

不要使用'$（文件）'。该事件应该绑定到最近的静态父级。 –

@Joseph Silber：我为此添加了PS。 “不要使用”太过分了。有使用它的有效案例（甚至没有提及它在jquery文档中指定：http://api.jquery.com/live/） – zerkms

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

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

来源

2013-09-18 16:04:16 haotang

您要动态生成这些元素应用在页面加载，所以任何听者不会能得到的。我用正确的解决方案编辑了你的小提琴。基本上，jQuery通过将它附加到父元素并将其向下传播到正确的动态创建的元素来为将来的绑定保存事件。

$('#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/

来源

2014-10-01 18:24:21

Jquery将事件侦听器添加到动态添加的元素

回答

相关问题