Перепривязать обработчик событий, который был связан с методом .off () jQuery

Question

У меня есть элемент, назовем его div1, к которому я привязываю событие «щелчок», чтобы он запускал некоторый код при нажатии. Затем у меня есть еще один элемент, назовем его div2, когда он щелкает, он запускает следующую строку кода: div1.off('click'); Так что теперь обработчик события щелчка div1 удаляется.

Это работает очень хорошо, однако я бы хотел "перепривязать" это div1 событие клика позже, скажем, при третьем событии клика div.

Я не могу найти нигде, как перепривязать событие клика, которое я вызвал .off () на. Кто-нибудь знает, как я мог это сделать sh

Что я пробовал:

div1.one('click',function() {
    ...some code
});
div2.on('click',function() {
    ...some code
    div1.off('click');
});   
//all good so far
div3.on('click',function() {
    ...some code
    div1.on('click'); //this is the part which is obviously wrong i just put it to show my intentions - this line needs to "rebind" the div1 click event
});    

Answer 1

Вы должны создать функцию для одного клика, например, myfunc Ваша повторная привязка может div1 после нажатия div3

let div1 = $('#div1');
let div2 = $('#div2');
let div3 = $('#div3');

function myfunc() {
  alert('Haha!')
}

div1.one('click', myfunc);

div2.one('click', function() {
  console.log('off')
  div1.off('click', myfunc);
});
div3.one('click', function() {
  console.log('on')
  div1.on('click', myfunc);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

А вот пример использования bind и unbind в данном случае:

let div1 = $('#div1');
let div2 = $('#div2');
let div3 = $('#div3');

function myfunc() {
  alert('Haha!')
}

div1.one('click', myfunc);

div2.bind('click', function() {
  console.log('off')
  div1.unbind('click');
});
div3.bind('click', function() {
  console.log('on')
  div1.bind('click', myfunc);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

Answer 2

Другой способ включения и выключения события щелчка - это всегда оставлять захват на месте, но зависимость действия от дополнительного флага data (здесь: off):

$('div[id]').on('click',function() {
 let sw={two:true, three:""}[this.id];
 if (sw===undefined) { // div #one was clicked: do the action:
   if (!this.dataset.off) console.log(this.id); // do the action 
 }
 else $('div#one')[0].dataset.off=sw; // button #two or #three was clicked
});   

div {cursor:pointer}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>

Я пробовал версию с {two:true, three:false}, но, к сожалению, переменная sw превращается в строку при сохранении как dataset.off поэтому false становится "false" и становится правдивым . Пустой всегда фальси .

Answer 3

Вы можете извлечь анонимную функцию, определенную в div1.on, в обычную функцию, которую затем можно использовать повторно. Как показано ниже -

var div1 = $("#one")
var div2 = $("#two")
var div3 = $("#three")

div1.one('click',div1Click); //change anonymous function to normal function
div2.on('click',function() {
    console.log('2');
    div1.off('click');
});   
div3.on('click',function() {
    console.log('3');
    div1.on('click', div1Click); 
});    

function div1Click() {
   console.log('1');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">  
one
</div>
<div id="two">  
two
</div>
<div id="three">  
three
</div>