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()