jQuery：列表上的子元素的單擊事件

Question

我有一個jQuery/PHP腳本，它接收UL列表中的其他級別。例如：

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

點擊LI元素後，jQuery的追加另一個列表以郵寄收到此元素：

<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禮」元素.. 我的jQuery代碼：

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

     }) 
    }) 

如何正確調用clicked（child）元素上的點擊事件？ 感謝您的幫助。

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()在1.7推出，因此，如果您使用的是較舊的版本（不能升級），你應該使用delegate()：

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

Answer 2

你可以在你的事件處理程序使用e.stopPropagation()