要素の委任されたイベントを選択的にアンバインドする方法はありますか？

Question

は、次のコードを考えてみましょう：MouseEnterイベントが

$(document).on("mouseover mouseout", ".child", function(){ ..}

として.childする制限されている場合は

<div class="parent1"> 
 
     <div class="child">child1</div> 
 
    </div> 
 
    <div class="parent2"> 
 
     <div class="child">child2</div> 
 
    </div>

を.parent2のためにこれをアンバインドする方法.childだけで、まだそれはビンを持っている.parent1.childのためのded？ .childが動的に挿入されているので

Answer 1

jQueryの.unbind()が...

$(".parent2 .child").unbind("mouseover mouseout"); 

EDIT
を行う必要があり、これを試してみてください。

$(".parent2").find(".child").unbind("mouseover mouseout"); 

Answer 2

私はあなたがそのため、文書を使用する必要があります信じていますこれが拘束されている場所であり、その子供たちを見つけてやります。off()

$(document).find(".parent2").off("mouseover mouseout", ".child"); 

私は（divをテストするには、このマークアップを使用あなたは、単に適切

<div class="parent1"> 
     <div class="child">child1</div> 
<div>... 

であなたのdivを閉じなかったという仮定を作り、改訂されたマークアップを使用してテストしたピア/兄弟であります壮大な子供よりむしろ）。正しいマークアップを掲示することによって正しい仮定ではないことを明確にする。

<div class="parent1"> 
    <div class="child">child1</div> 
</div> 
<div class="parent2"> 
    <div class="child">child2</div> 
</div> 

テスト後、最初の試行では機能しませんでした。これは、イベントがドキュメントにバインドされ、クラス.childセレクタを持つ子によってフィルタリングされ、適切な要素があるときに発生するためです。これらのバインディングの "フィルタ"を変更することができなかったので、バインディングを単純に "やり直す"必要がありました。新しい子をフィルタリングしました。新しい要素を追加すると正しく動作しません。その後子供をもう一度追加します - それは.childの文書にバインドされていることに注意してください。完璧なシナリオではなく、私が見つけた最高のものです。

$(document).off("mouseover mouseout", ".child").find('.child').filter(function() { 
    return !$(this).parents(".parent2").length; 
}).on("mouseover mouseout", function() { 
console.log("new " + $(this).text()); 
});