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

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

因为您有 2 个 .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) 作为委托(delegate)事件处理程序上的主选择器对于性能而言并不是理想的选择。使用未动态附加到 DOM 的最近元素，而不是 document。