jQuery：リストの子要素のクリックイベント

Question

jQuery/PHPには、ULリストの他のレベルを受け取るスクリプトがあります。たとえば：LI要素をクリックした後

<ul class="obj"> 
<li>Object A</li> 
<li>Object B</li> 
</ul> 

、jQueryのは、POSTが受信し、この要素に別のリストを追加します：

<ul class="obj"> 
<li>Object A 
<ul class="obj"> 
<li>Object A1</li> 
<li>Object A2</li> 
</ul> 
</li> 
</li>Object B</li> 

その後、私は 'オブジェクトA1' をクリックしたときに要素とそれに別のリストを追加すると、両方とも ".obj li"要素であるため、親要素への追加をリストします。 My jQueryコード：

$(function(){ 
     $(".obj li").click(function(){ 
      var el = $(this); 
      $.post('get_rel.php', 
       function(data){ 
        $(el).append(data) 
        el = null; 
      }); 

     }) 
    }) 

クリックされた（子）要素に対してクリックイベントを呼び出す方法はありますか？ ありがとうございます。この原因は何

Answer 1

はclick()ハンドラはあなたがclick()を呼び出す時にページ上の要素にバインドされているだけです。子要素をリストに追加すると、クリックイベントは最上位レベルliまでバブリングされ、イベントハンドラがトリガされます。ここではthisがトップレベルliであるため、新しい要素が表示されます。

代わりに、あなたはすべての現在および将来の要素に対して発生し、ハンドラ内thisは、現在の要素（この場合は重要な部分）される、イベントの委任を使用する必要があります。

$(document).on('click', '.obj li', function() { 
    var el = $(this); 
    $.post('get_rel.php', 
     function(data){ 
      $(el).append(data) 
      el = null; 
    }); 
}); 

on()古いバージョンを（してアップグレードすることはできません）を使用している場合、あなたはdelegate()を使用する必要がありますので、1.7で導入されました：

$(document).delegate('.obj li', 'click', function() { 
    var el = $(this); 
    $.post('get_rel.php', 
     function(data){ 
      $(el).append(data) 
      el = null; 
    }); 
}); 

Answer 2

あなたのイベントハンドラでe.stopPropagation()を使用することができます