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