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

给定这个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/

因为你有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)作为委托事件处理程序的主要选择器并不是理想的性能。

使用最近的元素代替document，而不是动态地追加到DOM。

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

见我的修改:

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

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

为了防止这种情况，您需要将事件处理程序设置为return false或调用event.stopPropagation()。

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

相关内容

最新更新

热门标签：