使用 jQuery 将事件侦听器添加到动态添加的元素 [重复]答案

【问题标题】：Adding event listeners to dynamically added elements using jQuery [duplicate]使用 jQuery 将事件侦听器添加到动态添加的元素 [重复]
【发布时间】：2012-08-17 09:59:46
【问题描述】：

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

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

【问题讨论】：

香草js解决方案：stackoverflow.com/a/27373951/1385441

标签： jquery events

【解决方案1】：

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

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

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

【讨论】：

不要使用$(document)。该事件应绑定到最近的静态父级。
@Joseph Silber：我为此添加了 PS。而且“不要使用”太过分了。有使用它的有效案例（甚至不要提到它在 jquery 文档中指定：api.jquery.com/live）

【解决方案2】：

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

例如

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

【讨论】：

有没有办法在原生 jquery 中没有的事件上使用 .on()。即我需要将它与 Jquery 插件一起使用。
@Wiz：你可以绑定到任何事件
@zerkms 好吧，我正在尝试将它与 Hovercard 和 $('.class').on('hovercard', function(){});不起作用，当通常的语法是 $('.class').hovercard(function(){});
@Wiz 这是一个非常基本的jsfiddle 来帮助您入门，您可能希望确保在一个元素上多次调用该插件时不会发生任何不良反应。（请注意，因为我没有看到 hovercard 插件的 CDN，所以我开始玩弄其中一个演示）
@HPWD 两者都可以工作，文档在 dom 的正文上方。实际上并没有太大的区别，但总的来说，您希望将处理程序绑定到可能的最接近的元素，这样它就不会在需要时进一步“冒泡”。我建议您阅读event bubbling 以获得更好的理解。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：