英文:
Rebind an event handler that was unbound with .off() method jQuery
问题
我有一个元素,让我们称之为div1
,我绑定了一个"click"事件,所以它在点击时会运行一些代码。
然后,我有另一个元素,让我们称之为div2
,当它被点击时会运行这行代码:div1.off('click');
,所以现在div1
的点击事件处理程序成功解绑了。
这个方法完全有效,但是我想在以后的某个时候,比如第三个div的点击事件上"重新绑定"这个div1
的点击事件。
我找不到任何关于如何重新绑定使用了.off()
的点击事件的信息。有人有任何想法如何实现这一点?
我尝试过的:
div1.one('click', function() {
...一些代码
});
div2.on('click', function() {
...一些代码
div1.off('click');
});
// 到目前为止都很好
div3.on('click', function() {
...一些代码
div1.on('click'); // 这部分显然是错误的,我只是为了表明我的意图而放置的这一行需要"重新绑定"div1的点击事件
});
英文:
I have an element let's call it div1
which I bind an event "click" to so it runs some code on click.
Then I've got another element let's call it div2
when it is clicked it runs this line of code: div1.off('click');
So now the div1
click event handler is unbinded successfully.
This works perfectly well however I would like to "rebind" this div1
click event later on say on a third div click event.
I can't find anywhere how to rebind a click event which I called .off() on.
Does anybody have any idea how I could accomplish this?
What I've tried:
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
});
答案1
得分: 2
你应该为你的一键操作创建一个函数,例如myfunc
,在点击div3
后可以重新绑定div1
。
let div1 = $('#div1');
let div2 = $('#div2');
let div3 = $('#div3');
function myfunc() {
alert('哈哈!');
}
div1.one('click', myfunc);
div2.one('click', function() {
console.log('关闭');
div1.off('click', myfunc);
});
div3.one('click', function() {
console.log('开启');
div1.on('click', myfunc);
});
这里是在这种情况下使用bind
和unbind
的示例:
let div1 = $('#div1');
let div2 = $('#div2');
let div3 = $('#div3');
function myfunc() {
alert('哈哈!');
}
div1.one('click', myfunc);
div2.bind('click', function() {
console.log('关闭');
div1.unbind('click');
});
div3.bind('click', function() {
console.log('开启');
div1.bind('click', myfunc);
});
希望对你有所帮助!
英文:
You should create a function for your one click, for example myfunc
your can rebind div1
after you click on div3
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
And here is example for use bind
and unbind
in this case:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
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);
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
你可以将在div1.on中定义的匿名函数提取为一个普通函数,然后可以重复使用。如下所示 -
var div1 = $("#one")
var div2 = $("#two")
var div3 = $("#three")
div1.one('click', div1Click); // 将匿名函数更改为普通函数
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>
英文:
You can extract the anonymous function defined in div1.on to a normal function which can then be reused. As shown below -
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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');
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案3
得分: 0
另一种打开和关闭点击事件的方法是始终保留点击捕获,但根据额外的 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"
并变为真值。空白始终为假值。
英文:
Another way of turning the click event on and off is to always leave the click capturing in place but make the action dependend on an extra data
flag (here:off
):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('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
});
<!-- language: lang-css -->
div {cursor:pointer}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
I tried a version with {two:true, three:false}
, but, unfortunately, the variable sw
is turned into a string when saved as dataset.off
, so false
becomes "false"
and becomes truthy. A blank is always falsey.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论