[解決済み] $(document).on("click")...not working?

質問

よくある間違いはないでしょうか？

要素が動的に生成されるため、.on() を使用しているスクリプトがありますが、動作していません。 試しに、セレクタを静的な動的要素のラップに置き換えてみましたが、まだ動作しませんでした! ラップを古い .click に切り替えたら動きましたが。

(これは明らかに動的要素では動作しません。重要なのはこれです。)

これは動作します。

$("#test-element").click(function() {
    alert("click");
});

これはない。

$(document).on("click","#test-element",function() {
    alert("click");
});

UPDATEです。

右クリックして、Chrome で "Inspect Element" をして、何かを再確認した後、クリックイベントが動作しました。 リフレッシュしても動作せず、要素を検査したら、動作しました。 これは何を意味するのでしょうか？

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

id="test-element" を持つ要素のクリックイベントをリッスンするために、ドキュメントにバインドするための正しい構文が使用されています。

おそらく、次のいずれかの理由で動作していません。

• 最近のバージョンのjQueryを使用していない
• DOM ready の内部でコードをラップしていない
• または、イベントがドキュメント上のリスナーにバブルアップされないようなことをしている。

作成された要素に関するイベントを捕捉するために 後に イベントリスナーを宣言した後に作成された要素のイベントを捕捉するには、親要素、または階層内のより高い要素にバインドする必要があります。

例えば

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

この例では、"bound to document"アラートのみが発火します。

jQuery 1.9.1によるJSFiddle