セレクタは唯一私がここにこのコードを持っている要素

Question

を選択/検査後の作業：

$(document).ready(function() { 
    debugger; 
    $("div[id^='stage_']").click(function (e) { alert('Hello'); }); 
}); 

私は説明できない奇妙なことは、私はセレクタを実行したときに到達したときに、私は、コンソールにいたらということであり、デバッガの文を返すと空の配列が返されます[]

しかし、私がステップアウトしてページに行くと、ChromeでCtrl-Shift-Cを押して検査を開始し、IDが 'コンソールでセレクタをもう一度実行してみると、今私は期待している要素を持っています。

私はこれを非同期であるかどうかを検証するためにここでも試しました。 （これは私がすべてのコントロールを持っていないシステムです）。しかし、デバッガに到達すると、セレクタは動作しません.10秒待っても（それでは、divがそこにあると確信しています）。私はまだjQueryが要素を認識するようにインスペクタに入っていなければなりません。

$(document).ready(function() { 
    //debugger; 
    setTimeout(function() { 
     debugger; 
     $("div[id^='stage_']").click(function (e) { alert('allo'); }); 
    }, 10000); 
}); 

なぜjQueryはChromeのインスペクタでクリックした要素のみを認識しますか？

Answer 1

"on"を使用すると、ページが読み込まれた後に要素が存在しても機能します。

$(document).ready(function(){ 
 
    //$("div[id^='stage_']").click(function (e) { alert('Hello'); }); 
 
    $("body").on('click','div[id^="stage_"]', function (e) { alert('Hello'); }); 
 
    $('body').html('<div id="stage_1">teste1</div>' + 
 
        '<div id="stage_2">teste2</div>' + 
 
        '<div>blabla</div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

DOC：http://api.jquery.com/on/