jquery - 在 jquery 中定义的单击事件准备在新元素上

Question

可能重复：
动态添加元素并尝试使用选择器 .click 事件 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.foofor a.bar）？

Answer 1

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

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

Answer 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
  });
}

Answer 3

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

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

使用委托。