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

Question

所以现在,我理解为了将事件监听器附加到动态添加的元素,您必须在添加元素后重新定义监听器.有没有办法绕过这个,所以你不必执行一整个额外的代码块？

Answer 1

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

例如

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

Answer 2

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

其中click是事件名称,并且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/