Как отключить (Jquery) привязку или отвязку определенного события от любого элемента

Я хочу знать, как привязать или отвязать конкретное событие от любого элемента.

$(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. Затем я привязал другое событие к тому же div при нажатии на div2, поэтому теперь для щелчка div1 нужно запустить два события.

Теперь, когда я нажимаю на div3, чтобы отменить привязку события, метод .off отменяет привязку всех ранее прикрепленных событий к div1.

Мой вопрос

Как я могу отвязать (используя Jquery .off) только одно событие (скажем, второе событие) из div1 когда я нажимаю div3.

Я слышал, что мы можем назвать любой метод .on или .off из любой части приложения, но не знаю, как именно применить.


events jquery bind unbind
person Maharshi    schedule 06.01.2017    source источник
comment
Я думаю, он уже работает нормально :)   -  person kukkuz    schedule 06.01.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете добавлять/удалять отдельные события, передавая функции в/из функций 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>

person Robin Mackenzie    schedule 06.01.2017
comment
Я понял твою точку зрения, Робин. Я думал, что должна быть какая-то встроенная вещь для обработки событий. спасибо за Ваш ответ. Я приму ваш ответ через несколько. - person Maharshi; 06.01.2017