javascript - 重新绑定与 .off() 方法 jQuery 未绑定的事件处理程序

Question

我有一个元素，我们称之为它div1，我将一个事件“click”绑定到它，以便它在单击时运行一些代码。然后我有另一个元素，让我们div2在单击它时调用它，它运行这行代码：div1.off('click');所以现在div1单击事件处理程序已成功解除绑定。

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

我在任何地方都找不到如何重新绑定我称为 .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
});    

标签： javascriptjquery

Answer 1

您应该为您的一键创建一个功能，例如您可以在点击后myfunc重新绑定div1div3

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>