在请求运行时阻止jQuery函数运行

Question

I have a function that I need to reuse often. The problem occurs when I load another page into the current page, the function fires twice. I tried this solution but could not get it to work ( Disable jquery function after 1 click, to prevent multiple executions ). Any solutions to prevent the function from firing multiple times while a request is being made? The function should only fire once per click.

(function($) {
    $.fn.likeclick = function(thiss, key) {  
        var $this = thiss;
        var pid=key;
        if ($this.hasClass('addd')) {
            $.post("/blah.php?id="+pid, function(data) {
                if (data=="ok"){
                    $this.removeClass('addd').addClass('rem');
                    $('.ccount#'+pid).html(function(i,val) {
                        return (parseFloat(val) + 1).toFixed(0);
                    });
                }
            });
        } else {
            $.post("/blah1.php?id="+pid, function(data) {
                if (data=="okk"){
                    $this.removeClass('rem').addClass('addd');
                    $('.ccount#'+pid).html(function(i,val) {
                        return (parseFloat(val) - 1).toFixed(0);
                    });
                }
            });
        }
    };
})(jQuery);

Usage:

<div class="like addd"></div>

$('.like').click(function() {
    likeclick($(this),this.id);
});

Answer 1

If I'm understanding your question correctly, what you need is a way for the function to know that if there is currently any active requests before making its request. Why not add a boolean like hasActiveRequest to keep track of this? So by default its false , then when they click it, check that boolean...if false then set it to true and make the request; else if its true , then don't make request (since there is already one in progress). When the request is complete, then set the boolean back to false .

Answer 2

Since the functions did not work on the pages (or data) that were loaded with the .post() method, I tried adding the jQuery function to the loaded page directly or with a .js file. Either way the code was being executed multiple times after a few pages were loaded using .post(). Whether I used delays, timeout functions or added booleans to try to prevent the function from being fired multiple times per click, the function still executed multiple times.

After an endless search I came across this article ( http://docs.jquery.com/FAQ#Why_do_my_events_stop_working_after_an_AJAX_request.3F ) in the jQuery documentation.

In that article it states:

Beware! As of jQuery 1.4.2, binding the same handler to the same element multiple times will cause it to execute more than once. This differs from previous versions of jQuery as well as the DOM 2 Events spec (which normally ignores duplicate event handlers).

More research turned up the .live() method, but that method is deprecated. The .on() method replaced .live(). So my solution is:

$(document).on('click', '.like', function(){
var $this = $(this);
likeclick($this,this.id);
});

Now I don't have to add functions to the loaded page (data) from the .post() method or use other methods to try and prevent the function from firing twice.