How to bind, unbind and rebind (click) events in JQuery

Question

After asking the same question 2 weeks ago here, I finally found "the" solution. This is why I am answering my own question. ;)

HOW TO BIND, UNBIND AND REBIND EVENTS IN JQUERY?

Possible duplicate of jquery rebind() disable events for a specific time, then rebind them — Sterling Archer
– Sterling Archer, Commented Aug 24, 2017 at 20:04

John Doe Smith · Accepted Answer · 2012-12-18 20:02:15Z

13

And THIS is the perfect solution. (At least for me.)

$(document).on('click', 'a#button', function(){
    $(this).after('<span> hello</span>');
    $('span').fadeOut(1000);
});

$('a#toggle').toggle(
    function(){
        $(this).text('rebind');
        $('a#button').on('click.disabled', false);
    },
    function(){
        $(this).text('unbind');
        $('a#button').off('click.disabled');
    }
);

".on()" does it. NOTE: It is important to bind the event like you can see on line one! It does not work with .click() or …!

See the docs!

Here is a fiddle to try it and experiment with it!

Enjoy!

answered Dec 18, 2012 at 20:02

John Doe Smith

1,6435 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user400654 Over a year ago

Why did you repost it if you already answered it on your original question?

John Doe Smith Over a year ago

I guess because the other solution is also nice and useful! (Updated the old post)

Con Antonakos Over a year ago

Great answer! This certainly helped me temporarily disable a button's click event. And, for additional emphasis, the context of the click event should be how it is shown in the above answer!

Con Antonakos Over a year ago

Question: why does this work? Are we enabling/disabling a 'disabled' property on the native click event?

Laurens Kuiper Over a year ago

Important! For anyone looking into this, the .toggle() method was deprecated in jQuery 1.8 and removed in jQuery 1.9. (Source - jQuery.com)

Wessam El Mahdy · Accepted Answer · 2016-01-07 21:54:44Z

3

A simpler and short solution is to add a class to the object if you want to unbind it then remove this class to rebind ex;

$('#button').click( function(){
   if($(this).hasClass('unbinded')) return;
   //Do somthing
 });

$('#toggle').click(function(){
    $('#button').toggleClass('unbinded');
 });

answered Jan 7, 2016 at 21:54

Wessam El Mahdy

4676 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to bind, unbind and rebind (click) events in JQuery

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related