$（document）.on（“ click”…機能しませんか？

Question 1

私がここで犯している可能性のあるよく知られた間違いはありますか？

要素が動的に生成され、機能していないため、.on（）を使用するスクリプトがあります。テストするために、セレクターを静的な動的要素のラップに置き換えましたが、それでも機能しませんでした。私が普通の古いものに切り替えたとき、それはうまくいきました。
（これは明らかに動的要素では機能しません。重要な要素です。）

これは機能します：

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

これはしません：

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

更新：

右クリックしてChromeで「要素の検査」を実行して何かを再確認した後、クリックイベントが機能しました。更新しましたが、機能しませんでした。要素を調べてから、機能しました。これは何を意味するのでしょうか？

Question 2

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

次のいずれかが原因で、おそらく機能していません。

最近のバージョンのjQueryを使用していない
DOM対応の内部にコードをラップしない
または、イベントがドキュメントのリスナーにバブルアップしない原因となる何かを実行しています。

作成された要素のキャプチャイベントにAFTERあなたのイベントリスナーを宣言-あなたは親要素、または階層の上位要素にバインドする必要があります。

例えば：

$(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>');
});

この例では、「ドキュメントにバインド」アラートのみが発生します。

jQuery1.9.1を使用したJSFiddle

Question 3

あなたのコードは機能するはずですが、答えが役に立たないことは承知しています。ここ（jsfiddle）で実際の例を見ることができます。

Jquery：

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

誰かがすでに指摘しているように、あなたはクラスの代わりにIDを使用しています。IDを持つページに複数の要素がある場合、jqueryはそのIDを持つ最初の要素のみを返します。それが動作する方法であるため、エラーは発生しません。これが問題である場合は、クリックイベントが最初のイベントでは機能しますが、その後のイベントでは機能しtest-elementないことに気付くでしょう。

これが問題の症状を正確に説明していない場合は、セレクターが間違っている可能性があります。あなたの更新は、要素を検査してからページをもう一度クリックし、クリックをトリガーするため、これが当てはまると私に信じさせます。これを引き起こしている可能性があるのは、イベントリスナーdocumentをtest-element。ではなく実際に配置した場合です。その場合、ドキュメントをクリックしてから再びオンにすると（開発者ウィンドウからドキュメントに戻るなど）、イベントがトリガーされます。この場合、2つの異なるタブ間をクリックするとクリックイベントがトリガーされることにも気付くでしょう（これらは2つの異なるタブであるためdocument、ドキュメントをクリックしているためです。

これらのどちらも答えではない場合、HTMLを投稿することはそれを理解するのに大いに役立ちます。

Question 4

古い投稿ですが、同じケースがあるので共有するのが大好きですが、ついに問題がわかりました：

問題は次のとおりです。指定されたHTML要素で動作する関数を作成しましたが、この関数に関連するHTML要素はまだ作成されていません（要素が動的に生成されたため）。それを機能させるには、要素を作成すると同時に関数を作成する必要があります。それに関連する関数を作成するよりも最初に要素。

簡単に言うと、関数はその前に作成された要素（彼）に対してのみ機能します。動的に作成された要素は、彼の後を意味します。

ただし、上記のケースに注意しなかったこのサンプルを調べてください。

<div class="btn-list" id="selected-country"></div>

動的に追加：

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

この機能はボタンをクリックすることでうまく機能しています：

$(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

または、次のようなボディを使用できます：

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

これと比較して、機能していません：

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

それが役立つことを願っています

Question 5

これは機能します：

<div id="start-element">Click Me</div>

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

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

これがフィドルです

Question 6

これを試して：

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

それを行う文書の方法も奇妙です。クラスセレクターに使用すればそれは私には理にかなっていますが、IDの場合は、おそらく役に立たないDOMがそこをトラバースしているだけです。idセレクターの場合、その要素を即座に取得します。