Как выборочно отвязать делегированное событие на элементе?

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 один, но все еще есть ded для .parent1.child?

Answer 1

JQuery .unbind() должен делать ...

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

EDIT
Поскольку .child динамически вставляется, попробуйте следующее:

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

Answer 2

Я считаю, что вы должны использовать этот документ, так что где это связано, затем найдите этих детей и сделайте off()

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

I тестировали с использованием пересмотренной разметки, делая предположение, что вы просто не правильно закрыть свой DIV с

<div class="parent1"> 
     <div class="child">child1</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()); 
});