Question

给出这个HTML，

<div id="dd_container" class="dd dd_container">
 <ul class="dd_deploy">
   <li class="dd_deploy">
     more options
   </li>
  </ul>
 <ul class="dd">
   <li class="dd">
     el1
   </li>
   <li class="dd">
     el2
   </li>
   <li class="dd">
     el3
   </li>   
 </ul>
</div>

为什么这个jquery函数会两次打印到控制台？

$(document).on('click','.dd_deploy', function(){
    console.log($(this).parents('.dd_container').children('ul.dd'));
});

http://jsfiddle.net/mBPfG/

Answer 1

因为你有两个.dd_deploy元素，一个嵌套在另一个元素中，所以事件正在冒泡。

<ul class="dd_deploy">
    <li class="dd_deploy">
        more options
    </li>
</ul>

如果打算使用此HTML结构，则可以使用event.stopPropagation来阻止事件冒泡，如下所示：

$(document).on('click','.dd_deploy', function(e){
    e.stopPropagation();
    console.log($(this).parents('.dd_container').children('ul.dd'));
});

另请注意，将$(document)作为委派事件处理程序的主要选择器并不是理想的性能。而不是document使用最近未动态附加到DOM的元素。

Answer 2

因为事件正在<li>冒泡到<ul>。

查看我的modification：

$(document).on('click','.dd_deploy', function(event){
    console.log(event.target)
});

它将打印<li>元素，后跟<ul>元素。

为防止这种情况发生，您需要将事件处理程序设为return false或致电event.stopPropagation()。

Answer 3

$(document).on('click','.dd_deploy', function(e){
    e.stopPropagation(); //stops the bubbling
    console.log($(this).parents('.dd_container').children('ul.dd'));
});

当只有一个对象存在时，jquery返回两个对象

3 个答案: