重新绑定使用.off()方法jQuery解除绑定的事件处理程序
我有一个元素，我们称它为div1，我将事件“单击”绑定到它，这样它就可以在单击时运行一些代码。然后，我得到了另一个元素，当它被单击时，我们称它为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
}); 回答 3
Stack Overflow用户
发布于 2020-01-06 15:04:25
你应该为你的一次点击创建一个函数，例如在你点击div3之后，你可以重新绑定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>
Stack Overflow用户
发布于 2020-01-06 15:02:53
您可以将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>
Stack Overflow用户
发布于 2020-01-06 16:37:30
打开和关闭点击事件的另一种方法是始终保留点击捕获，但使操作依赖于额外的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"并变为tried。空格总是假的。
https://stackoverflow.com/questions/59607770
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号