jquery: live() - only lives once?

Question

I am following this thread to disable/ enable the click on a button, Best way to remove an event handler in jQuery?

its idea is that you can also use the live() method to enable/disable events. What will happen with this code is that when you click on an a tag-element, for instance, .load-item, it will add the class disabled to this element. This will make it so that the selector no longer matches the element and the event will not be fired until the 'disabled' class is removed making the .live() selector valid again.

Below is what I came out with and it does disable the click on the first button,

$('.load-item:not(.disabled)').live('click',function(){


/* add a .current class to the target item */
$(this).parentsUntil('.column-global').addClass('current');

/* add .disabled class to each a tag in the .current element-div */
$('.current a').each(function(index) {
    $(this).addClass('disabled');
});

....

});

and I have another function to remove the disabled-class when you click on another button,

$('.button-return').click(function(){

    ...

    /* remove all the .disabled class if any exists */
    $('.current a').each(function(index) {
        $(this).removeClass('disabled');
    });

    ...

    /* remove all the .current class if any exists */
    $('.item-global').removeClass('current');



    return false;

});

I have checked that it does remove the disabled-class, but the first button still is not back to the original clickable state.

have I missed out anything - or the live() actually only lives once only? any better solutions if live() is not the one I should work on??

thanks.

Answer 1

Your return button needs to be a live event as well

$('.button-return:not(disabled)').live("click",function(){...});

Also when using addClass() and removeClass() you do not need to use each on the selector. Just call it.

$('.current a').each(function(index) {
    $(this).removeClass('disabled');
});

is the same as this

$('.current a').removeClass('disabled');

---

Edited

Note when you add the live event to the return button you need to verify that it is not disabled.

It works perfectly here is a simple demo. http://www.jsfiddle.net/Qax3n/

Answer 2

It must have something to do with your HTML layout or other Javascript. The following works: http://jsfiddle.net/EEJEh/