jqueryの.delegateと動的コンテンツ

Question

私は、次のHTMLにしている：

<ul class="ulclass"> 
    <li class="liclass"> 
     ...some more nesting 
      <a href="somelink">somelink</a> 
     ....close nesting 
    </li> 
    <li class="liclass"> 
    ... 

</ul> 

クラス「liclass」からそれぞれのLiのクリックイベントがありますので、私はおそらく<div>（とアンカーからバブリングを停止しています.liclassの内側）：

$(".liclass div").delegate("a", "click", function(e) { 
      e.stopPropagation();   
}); 

今私はAjaxの.LOADと<li class="liclass">さらに追加。 stopPropagationは、静的な ".liclass"では機能しますが、動的に追加されるものでは機能しません。 ページがロードされたときに<ul class="ulclass">のコードがあるとします。 動的に追加された.lllassのバブリングを停止するために、変更をどのように変更するのか教えてください。

Answer 1

動的に作成された要素（この場合はul）を含むものに、代行ハンドラを配置して伝播を停止します。

$("ul.ulclass").delegate(".liclass div", "click", function(e) { 
      e.stopPropagation();   
}); 

$("ul.ulclass").delegate(".liclass", "click", function(e) { 
      // main code for each li element  
}); 

彼らは同じ要素の両方のデリゲートメソッドだから、e.stopPropagation()は、イベントがすでにバブルアップしているにもかかわらず、ハンドラを防ぐために動作するはずです。動的な要素を扱うそれを表示するデモを更新しました

JSFIDDLE DEMO

。

---

代替は、単にあなたの動的に作成div要素に直接ハンドラをバインドすることです。

したがって、​​を使用している場合は、古いコンテンツを消去して新しいコンテンツに置き換えると仮定します。その場合、コールバックで、divを選択してハンドラを再バインドします。

$("ul.ulclass").load('/whatever/', function() { 
     // shortcut to binding a handler with stopPropagation and preventDefault 
    $(this).find('li.liclass div').bind('click', false); 
}); 

Answer 2

これが機能するには、各Ajaxリクエストが完了するたびに ".delegate"を呼び出す必要があります。

Answer 3

あなたはjQueryの最新バージョンを使用している場合は、正しいコードは次のようになります。

$(document).on("click", ".liclass a", function(e) { 
    e.stopPropagation();   
}); 

Answer 4

イベントの代表団は、意味：すでに「より高いレベル」の要素にバブリングイベント。この要素への伝播をもう止めることはできません（すでに発生しているため）。伝播は、階層内のさらに上位の要素に対してのみ停止することができます。デリゲートをすでに「文書化」するように縛った場合は、まったく機能しません。