このjqイベント応答コードが機能しないのはなぜですか？

Question

私は最初にロードされた 'リンク'クラスのdivと、後で 'linksPanelHdr' div内で追加するその他のものについて、クリックイベント登録を設定しようとしています。私はこれを行う方法についての既存のSOの答えを研究しましたが、私は何か基本的なものを逃しているに違いありません。このHTMLで

：

<div class="linksPanelHdr"> 
    <div id="171" class="link"> 
     <span class="delButt">Delete Link</span> 
     <span class="openButt">Open Link</span>  
    </div> 
</div> 

、これとはJQ：私はそれを理解したように任意の "の子孫だ任意の 'delButt' class要素

$(".linksPanelHdr").on("click",".delButt",function(){ 
    alert("Triggered by link"+$(this).parent().attr('id')); 
}); 

このJQは、アラートをトリガーする必要がありますlinksPanelHdr 'domのクラス要素をクリックします。しかし、Firefox Inspectorによれば、イベントは初期ロード時や動的に追加されたリンク内に登録されていない場合でも表示されます。もちろん、クリックイベントは発生しません。

.delButtセレクタを 'null'に置き換えると、 'linksPanelHdr' divの内部をクリックするとイベントが発生します。誰かが私がどこにいるのか教えてもらえますか？前もって感謝します。

Answer 1

投稿する前に私はもう少し読んだ。私はSO：Event binding on dynamically created elements?を読んでいます。

が、私は例で注目：

$（staticAncestors）.on（eventNameの、dynamicChild、関数（）{}）;

私は最初のセレクタに非静的祖先を使用していました。つまり、動的に追加された可能性があるツリー上のdivにイベントを登録しようとしていました。私はjqがそれをどのように知っているのかわからないが、それはどんな場合でも問題を解決した。

メインセレクタは、特定の（ダイナミック）セレクタターゲットを囲むツリーの上の最初の要素である必要があります。私は、バブリング時間を最小限に抑えるために、最初の静的要素をツリーの上に置くことを望んでいると信じています。これは私が完全に逃したこの同じ状況に遭遇するかもしれない他の人たちのためにある程度の時間を節約することができることを願っています。