Question

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

请查看随附的代码段。

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

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

我的问题是

当我点击div3时，如何从div1取消绑定（使用Jquery .off）一个事件（让我们说第二个事件）。

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

Answer 1

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

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: