JavaScript / jQuery-重用元素的事件“ Click”

Question

I have an element, a div, for example. And attach an event 'click' to it. In jQuery, it would be:

 $('#myDiv').click(function(){ 
    $(".class1").show();
 })

Now, I would like to assign a new function "myDiv #", replacing the old. I am doing so:

$('#myDiv').click(function(){ 
    $(".class23").hide();
})

But when I run the 'click' on the div, the function I assigns the beginning of this doubt is performed.

Question: How to remove the function that will run with the click event attributed to an element? (No recreate the element with the new click event...)

Answer 1

You want .unbind .

You can either remove all previous bound functions:

$('#myDiv').unbind('click');

Or if you only want to unbind one specific function:

var show = function() { 
   $(".class1").show();
};

$('#myDiv').click(show);

and then:

$('#myDiv').unbind('click', show); // unbind first function

$('#myDiv').click(function() {     // bind second function
    $(".class23").hide();
});

Note that .click(func) is just a shortcut to .bind('click', func) .

Answer 2

If you know you'll only want to handle one click on an element, you can use one() which automatically unbinds after a single click:

$("#myDiv").one("click", function() {  
  $(".class1").show();
  $("#myDiv").one("click", function(){ 
    $(".class23").hide();
  });
});

Answer 3

使用JQuery解除绑定功能删除所有单击事件

$('#myDiv').unbind('click');

Answer 4

Add a counter on the first click event.

var counter = 0;
$('#myDiv').click(function(){ 
    if(counter>1){
       $(".class23").hide();
    }
    else
       $(".class1").show();

   counter++;
 })

just an example..