jquery rebind() disable events for a specific time, then rebind them

问题

After click on a button my script loads new content. As long as it is loading I don't want a list of elements to be clickable.

IS there any way to unbind the click-event of those elements, load the content and then "rebind" the events correctly?

What I want to prevent is a if-statement inside every click-function/element.

Here is what i've tried:

$(load_button).click(function(){
    $('a').each(function(){
        var dis_e = $(this).data('events');
        $(this).data('disabled-events', dis_e);
    }).unbind('click');

    $(some_content).load(function(){
        $('a').each(function(){
            var dis_e = $(this).data('disabled-events');
            $(this).removeData('disabled-events');
            $(this).bind('click', dis_e);
        });
    });
});

UPDATE:

it should also prevent the elements from (in this case) alerting 'click':

$('a').click(function(){
   alert('click');
});

回答1:

You can temporarily bind a new click event with a specific namespace for your elements that will prevent the click event to propagate and when your content is loaded you unbind your event.

$("a").bind("click.disabled", function(e) {
    e.stopImmediatePropagation();
    return false;
});

And later on:

$("a").unbind("click.disabled");

EDIT: As pointed out by Yoshi, this expects your click event handler to be attached to the element before your custom events. So I can see two ways around this:

Either you always bind this event handler to each of your elements when you create them so that they are always called before your custom click event handler. And you only do stopImmediatePropagation() and return false when you are loading your data.
Or you check this other question so that your new event handler is first in the list.

If you chose the first method, your event would be something like this :

var clicDisabled = false;
$("a").bind("click.disabled", function(e) {
    if (true == clicDisabled) {
        e.stopImmediatePropagation();
        return false;
    }
});

and then when loading your content you set the variable clicDisabledto true temporarily.

回答2:

Based on your answers i wrote the following plugin:

(function($){
    $.fn.rebind = function(){
        var init = 'init-rebind';
        return this.each(function() {
            var is_init = $(this).data(init);
            if (!is_init){
                $(this).data(init, true);
                $(this).bind('click.rebind mouseenter.rebind mouseleave.rebind', function(e){
                    if ($(this).hasClass('disabled')){
                        e.stopImmediatePropagation();
                        e.preventDefault();
                    }
                });
            }
        });
    };
})(jQuery);

Instead of using a global variable i decided to add/remove the class 'disabled' in order to also have control within css.

check out the demo!

THX to all!

UPDATE: Check this out !!

来源：https://stackoverflow.com/questions/13729681/jquery-rebind-disable-events-for-a-specific-time-then-rebind-them

标签

jquery

bind

unbind