Question

请考虑以下代码：

＆＃13;

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

＆＃13;

如果将mouseenter事件限制为.child为

＆＃13;

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

＆＃13;

如何单独为.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

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

如何有选择地取消绑定元素上的委托事件？

2 个答案: