javascript - jQuery .load() How to prevent double loading from double clicking - Stack Overflow

admin管理员组

文章数量:1325702

I am using jQuery load() function to load some pages into container. Here is the code:

$('div.next a').live('click',function() {

    $('.content').load('page/3/ #info','',function(){
        //do something
    });

return false;

});

Everything works just fine but the problem is when I quickly double click the div.next link, from console I see that it loads the page twice because I did a quick double click. I could even make it 3 clicks and it will load it 3 times and show in console smth like that:

GET http://site/page/3/     200     OK  270ms   
GET http://site/page/3/     200     OK  260ms

My question is how to prevent such double clicking and not to let load the target page more then once no matter how many times it was clicked.

Thank you.

I am using jQuery load() function to load some pages into container. Here is the code:

$('div.next a').live('click',function() {

    $('.content').load('page/3/ #info','',function(){
        //do something
    });

return false;

});

Everything works just fine but the problem is when I quickly double click the div.next link, from console I see that it loads the page twice because I did a quick double click. I could even make it 3 clicks and it will load it 3 times and show in console smth like that:

GET http://site/page/3/     200     OK  270ms   
GET http://site/page/3/     200     OK  260ms

My question is how to prevent such double clicking and not to let load the target page more then once no matter how many times it was clicked.

Thank you.

• javascript
• jquery
• load
• onclick

Share Improve this question Follow asked Sep 14, 2011 at 16:12 devjs11devjs11 1,95888 gold badges4343 silver badges7373 bronze badges 2

• Do you want the link to be clickable again once the page loads? – Ruan Mendes Commented Sep 14, 2011 at 16:31
• vice versa, I want to be disabled after its clicked and then be activated when the page is loaded into container. – devjs11 Commented Sep 14, 2011 at 16:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Whatever happened to good ol' JavaScript? Why are you all trying to figure it out with pure jQuery?

var hasBeenClicked = false;

$('div.next a').live('click',function() {

    if(!hasBeenClicked){
        hasBeenClicked = true;
        $('.content').load('page/3/ #info','',function(){
            //do something
            //If you want it clickable AFTER it loads just unment the next line
            //hasBeenClicked = false;
        });
    }

    return false;
});

As a side note, never never never use .live(). Use .delegate instead like:

var hasBeenClicked = false;

$('div.next').delegate('a','click',function() {

    if(!hasBeenClicked){
        hasBeenClicked = true;
        $('.content').load('page/3/ #info','',function(){
            //do something
            //If you want it clickable AFTER it loads just unment the next line
            //hasBeenClicked = false;
        });
    }

    return false;
});

Why? Paul Irish explains: http://paulirish./2010/on-jquery-live/

To answer your ment...

This could happen if you have your delegate function nested inside your AJAX call (.load(), .get(), etc). The div.next has to be on the page for this to work. If div.next isn't on the page, and this isn't nested, just do this:

$('#wrapper').delegate('div.next a','click',function() {

http://api.jquery./delegate/

Delegate needs the selector to be the parent of the dynamically added element. Then, the first parameter of delegate (div.next a in the last example) is the element to look for within the selected element (#wrapper). The wrapper could also be body if it's not wrapped in any element.

You could try using the jquery one method:

$("a.button").one("click", function() {
       $('.content').load('page/3/ #info','',function(){
               //do something
       });
});

You could unbind the click event with die():

$(this).die('click').click(function() { return False; });

Or you could give the element a .clicked class once it is clicked:

$(this).addClass('clicked');

And check if that class exists when performing your logic:

$('div.next a').live('click',function() {
    if (!$(this).is('.clicked')) {
        $(this).addClass('clicked');

        $('.content').load('page/3/ #info','',function(){
            //do something
        });
    }

    return false;
});

Store whether you're waiting for the load in a variable.

(function() {
  var waitingToLoad = false;
  $('div.next a').live('click',function() {

    if (!waitingToLoad) {
      waitingToLoad = true;
      $('.content').load('page/3/ #info','',function(){
          waitingToLoad = false;
          //do something
      });
    }
    return false;
  });

})()

本文标签： javascriptjQuery load() How to prevent double loading from double clickingStack Overflow