javascript - jqueryは、1つだけが存在する場合、2つのオブジェクトを返します

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関数がコンソールに2回出力されるのはなぜですか？

$(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)また、委任されたイベント ハンドラーでプライマリ セレクターを使用することは、パフォーマンスにとって理想的ではないことにも注意してください。documentDOM に動的に追加されない最も近い要素を使用する代わりに。

Answer 2

イベントがからにバブリングしている<li>ため<ul>です。

私の変更を参照してください：

$(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'));
});​