javascript - 重新绑定(bind)使用 .off() 方法 jQuery 解除绑定(bind)的事件处理程序

Question

我有一个元素，我们将其称为 div1，我将事件“click”绑定(bind)到它，以便它在单击时运行一些代码。然后我有另一个元素，我们将其称为 div2，当单击它时，它会运行以下代码行: div1.off('click'); 现在， >div1 点击事件处理程序已成功解除绑定(bind)。

这工作得很好，但是我想稍后在第三个 div 点击事件上“重新绑定(bind)”这个 div1 点击事件。

我在任何地方都找不到如何重新绑定(bind)我调用的 .off() 的点击事件。有人知道我该如何实现这一目标吗？

我尝试过的:

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，您可以在点击div3后重新绑定(bind)div1

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>