重新绑定一个使用 .off() 方法解绑的事件处理程序,使用 jQuery。

huangapple go评论127阅读模式
英文:

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);
});

这里是在这种情况下使用bindunbind的示例:

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 = $(&#39;#div1&#39;);
let div2 = $(&#39;#div2&#39;);
let div3 = $(&#39;#div3&#39;);

function myfunc() {
  alert(&#39;Haha!&#39;)
}

div1.one(&#39;click&#39;, myfunc);

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

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;div1&quot;&gt;div1&lt;/div&gt;
&lt;div id=&quot;div2&quot;&gt;div2&lt;/div&gt;
&lt;div id=&quot;div3&quot;&gt;div3&lt;/div&gt;

<!-- 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 = $(&#39;#div1&#39;);
let div2 = $(&#39;#div2&#39;);
let div3 = $(&#39;#div3&#39;);

function myfunc() {
  alert(&#39;Haha!&#39;)
}

div1.one(&#39;click&#39;, myfunc);

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

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;div1&quot;&gt;div1&lt;/div&gt;
&lt;div id=&quot;div2&quot;&gt;div2&lt;/div&gt;
&lt;div id=&quot;div3&quot;&gt;div3&lt;/div&gt;

<!-- 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 = $(&quot;#one&quot;)
var div2 = $(&quot;#two&quot;)
var div3 = $(&quot;#three&quot;)

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

function div1Click() {
   console.log(&#39;1&#39;);
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;one&quot;&gt;  
one
&lt;/div&gt;
&lt;div id=&quot;two&quot;&gt;  
two
&lt;/div&gt;
&lt;div id=&quot;three&quot;&gt;  
three
&lt;/div&gt;

<!-- 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 变成了 &quot;false&quot; 并变为真值。空白始终为假值

英文:

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 -->

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

<!-- language: lang-css -->

div {cursor:pointer}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;one&quot;&gt;one&lt;/div&gt;
&lt;div id=&quot;two&quot;&gt;two&lt;/div&gt;
&lt;div id=&quot;three&quot;&gt;three&lt;/div&gt;

<!-- 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 &quot;false&quot; and becomes truthy. A blank is always falsey.

huangapple
  • 本文由 发表于 2020年1月6日 14:44:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/59607770.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定