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 REB

Answer 1

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

Answer 2

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!