如何選擇性地取消綁定一個元素上的委託事件？

Question

考慮下面的代碼：

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

如果MouseEnter事件爲界，.child作爲

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

如何解除綁定本作.parent2 .child獨自一人，但仍然有它代理.parent1.child？

Answer 1

jQuery的.unbind()應該做的......

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

編輯
由於.child動態插入，試試這個：

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

Answer 2

我相信你應該使用文檔，因爲這是這裏綁定的地方，然後找到那些孩子並做off()

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

我使用修訂標記，使你根本沒有正確與

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