jquery - 使用 jQuery 将事件侦听器添加到动态添加的元素

Question

所以现在，我知道为了将事件侦听器附加到动态添加的元素，您必须在添加元素后重新定义侦听器。

有没有办法绕过这个，所以你不必执行整个额外的代码块？

Answer 1

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

例如

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

Answer 2

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

whereclick是事件名称，handler是事件处理程序，例如对函数或匿名函数的引用function() {}

PS：如果您知道要向其中添加动态元素的特定节点 - 您可以指定它而不是document.

Answer 3

您正在动态生成这些元素，因此在页面加载上应用的任何侦听器都将不可用。我已经用正确的解决方案编辑了你的小提琴。基本上，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/

Answer 4

使用 jquery 插件调用添加新元素时，您可以执行以下操作：

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