在 jquery 中定义的单击事件准备好在新元素上[重复]答案

【问题标题】：Click event defined in the jquery ready on new element [duplicate]在 jquery 中定义的单击事件准备好在新元素上[重复]
【发布时间】：2013-01-16 15:21:52
【问题描述】：

可能重复：
Dynamically Adding Elements and trying to use the selectors .click event Jquery

$(function(){
  $('a.bar').click(function(){
    // do something
  });

  $('a.foo').click(function(){
    $('#toto').append('<a class="bar">bar</a>');
  });
});


 <a class="foo">foo</a>
 <div id="toto"></div>

如何自动附加在 JQuery 中定义的点击事件，以便为其他事件添加的 dom 元素做好准备（例如，通过点击 a.foo 获得 a.bar）？

【问题讨论】：

标签： jquery

【解决方案1】：

您需要的是委托事件技术。使用.on 见下文

$(document).on('click', 'a.bar', function(){
    // do something
});

【讨论】：

$(document) 是否应该在“就绪”之外？

【解决方案2】：

您可以创建一个 init() 函数，在其中设置所有触发器并在 DOM 修改后调用它。例如：

$(function() {
  init();

  $('a.foo').click(function(){
    $('#toto').append('<a class="bar">bar</a>');
    init();
  });
});

function init() {
  $('a.bar').click(function(){
    // do something
  });
}

【讨论】：

这就是我想要避免的
第一次点击没问题.. 但是接下来的点击会绑定所有.bar 的处理程序，它已经有一个处理程序
Vega：是的，但您可以使用$('a.bar').data('events') 或之前取消绑定click 事件来检查它。我的回答只是一个提示，而不是完整的代码。

【解决方案3】：

$(document).ready(function(){
  $('.foo').click(function(){
    $('<a class="bar">bar</a>').appendTo('#toto');
  });

  $('#toto').delegate('.bar', 'click', function(a){
    $('.foo').toggle();    
  });
});

使用委托。

【讨论】：