jquery - 新しい要素で準備ができているjqueryで定義されたイベントをクリックします

Question

重複の可能性：
要素を動的に追加し、セレクターを使用しようとしています.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>

他のイベントによって追加されたdom要素の準備ができているJQueryで定義されたクリックイベントを自動的にアタッチするにはどうすればよいですか（たとえば、をクリックしa.fooて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();    
  });
});

デリゲートを使用します。