[解決済み】ダイナミックコンテンツでイベントハンドラが動作しない【重複あり

質問

あるタグAをクリックすると、別のタグBが追加され、クリック時にアクションBが実行されます。つまり、タグBをクリックすると、アクションBが実行されるわけです。しかし .on メソッドは、動的に作成されたタグ B に対して動作していないようです。

タグAのhtmlとjqueryは以下の通りです。

<a id="address" class="add_address btn btn-inverse btn-medium pull-right push-top">Add Shipping address</a>

$('.add_address').click(function(){
    //Add another <a>
    $(document).append('<a id="address"  class="pull-right update btn btn-inverse btn-medium push-top">Update</a>');
})

タグBがクリックされると、何らかのアクションBが実行される。私のjqueryは以下の通りです。

$('.update').on('click',function(){
  //action B
});

私は、クラス ".update" を持ついくつかの非ダイナミックコンテンツを持っています。そのため .on() のメソッドは、非ダイナミックコンテンツでは問題なく動作しますが、ダイナミックコンテンツでは動作しません。

ダイナミックコンテンツに対応させるにはどうしたらよいですか？

どのように解決するのですか？

セレクタパラメータを追加しないと、イベントはデリゲートではなく直接バインドされ、その要素がすでに存在する場合にのみ機能します（したがって、動的に読み込まれるコンテンツでは機能しません）。

参照 http://api.jquery.com/on/#direct-and-delegated-events

コードを次のように変更します。

$(document.body).on('click', '.update' ,function(){

jQueryセットはイベントを受け取り、引数として与えられたセレクタにマッチする要素にイベントを委譲します。つまり live jQuery set 要素は、コードを実行するときに存在しなければなりません。

この回答が注目されたので、2つの補足をします。

1) 可能であれば、イベントリスナーを最も正確な要素にバインドすることで、無駄なイベント処理を避けることができます。

つまり、もしあなたが、クラス b の既存の要素に、id a を使用しないでください。

$(document.body).on('click', '#a .b', function(){

を使用しますが

$('#a').on('click', '.b', function(){

2) id付きの要素を追加するときは、2回追加していないかどうか注意してください。同じidを持つ2つの要素を持つことはHTMLでは違法であるだけでなく、多くのことを壊してしまいます。たとえば、セレクタ "#c" は、このidを持つ1つの要素のみを取得します。