[解決済み] 動的に作成されたアイテムでjQueryクリックが機能しない [duplicate］

質問

与えられたdivの各要素をループするjQueryがあります( #container ) 内の各要素をループし、スパンがクリックされるたびに javascript の警告を表示する jQuery があります。これは <span> が静的であれば問題なく動作します。

しかし、次のようなコードにすると

$(someLink).click(function(){
   $("#container").html( <new html with new spans> )
});

jQueryのコードが発火しない。しかし、奇妙なことに

私の質問は、: クリックイベントが動的に作成されたアイテムに対して機能しない理由は何でしょうか？私は、イベントをフックするために、ドキュメント レディまたはハートビート スクリプト (100 ミリ秒ごとに起動) に何かを追加する必要があると仮定していますか?

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

こうしてください。

 $( '#wrapper' ).on( 'click', 'a', function () { ... });

ここで #wrapper は動的リンクを追加する静的要素です。

つまり、HTMLのソースコードにハードコーディングされたラッパーがあるわけです。

<div id="wrapper"></div>

で、それを動的なコンテンツで満たします。このアイデアは、動的要素に直接ハンドラをバインドする代わりに、イベントをラッパーに委譲することです。

私がお勧めするのは バックボーン.js - は、このプロセスに構造を与えてくれます。

var YourThing = Backbone.View.extend({

    // the static wrapper (the root for event delegation)
    el: $( '#wrapper' ),

    // event bindings are defined here 
    events: {
        'click a': 'anchorClicked'
    },

    // your DOM event handlers
    anchorClicked: function () {
        // handle click event 
    }

});

new YourThing; // initializing your thing