如何关闭（Jquery）绑定或取消绑定任何元素的特定事件

Question

我想知道如何绑定或取消绑定任何元素的特定事件。

$(document).ready(function(){
  $("#div2").on("click",function(){
    $("#div1").on("click",function(){
      console.log("binded from div2");
    });
  });
  $("#div1").on("click",function(){
    console.log("main document click binded");
 })
  $("#div3").on("click",function(){
    $("#div1").off("click");
  });
})

#div1{
  height:100px;
  width:100px;
  background-color:black;
  color:white;
}

#div2{
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div3{
  height:100px;
  width:100px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="div1">div1
</div>
<br/><br/><br/>

<div id="div2">div2
</div>
<br/><br/><br/>

<div id="div3">off
</div>

请检查附加的代码片段。

在其中，我最初将一个事件绑定到 div1。然后，当单击 div2 时，我将另一个事件绑定到同一个 div，所以现在有两个事件要触发 div1 单击。

现在，当我单击 div3 取消绑定事件时，.off 方法将取消绑定所有先前附加的事件到 div1。

我的问题是

当我单击 div3 时，我如何才能从 div1 中仅解除绑定（使用 Jquery .off）一个事件（比方说第二个事件）。

我听说我们可以从应用程序的任何部分将任何方法命名为 .on 或 .off 但不确定如何应用。

Answer 1

您可以通过将函数传入/传出 on 和 off 函数来添加/删除单个事件。

在此示例中，红色 <div> 将删除第二个事件处理程序（即您在单击白色 <div> 时添加的事件处理程序）：

$(document).ready(function() {
  $("#div2").on("click", function() {
    $("#div1").on("click", foo2);
  });
  $("#div1").on("click", foo1)
  $("#div3").on("click", function() {
    // turn off the handler for foo2 but keep the handler for foo1
    $("#div1").off("click", foo2);
  });
})

function foo1() {
  console.log('1st event happened');
}

function foo2() {
  console.log('2nd event happened');
}

#div1 {
  height: 100px;
  width: 100px;
  background-color: black;
  color: white;
}
#div2 {
  height: 100px;
  width: 100px;
  background-color: white;
  border: 1px solid black;
}
#div3 {
  height: 100px;
  width: 100px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="div1">div1
</div>
<br/>
<br/>
<br/>

<div id="div2">div2
</div>
<br/>
<br/>
<br/>

<div id="div3">off
</div>

如何关闭（Jquery）绑定或取消绑定任何元素的特定事件

How to off (Jquery) bind or unbind specific event from any element

jquery

events

bind

unbind