jQuery .load () Как предотвратить двойную загрузку от двойного щелчка - PullRequest
5 голосов
/ 14 сентября 2011

Я использую функцию jQuery load () для загрузки некоторых страниц в контейнер.Вот код:

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

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

return false;

});

Все работает просто отлично, но проблема в том, что когда я быстро дважды щелкаю ссылку div.next, из консоли я вижу, что она дважды загружает страницу, потому что я сделал быстрый двойной щелчок,Я мог бы даже сделать это 3 щелчка, и он загрузит его 3 раза и покажет в консоли что-то вроде этого:

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

Мой вопрос заключается в том, как предотвратить такой двойной щелчок и не дать загрузке целевой страницы болееодин раз, независимо от того, сколько раз на него нажали.

Спасибо.

Ответы [ 4 ]

1 голос
/ 14 сентября 2011

Храните, ожидаете ли вы загрузки в переменной.

(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;
  });

})()
1 голос
/ 14 сентября 2011

Вы можете попробовать использовать метод jquery one:

$("a.button").one("click", function() {
       $('.content').load('page/3/ #info','',function(){
               //do something
       });
});
1 голос
/ 14 сентября 2011

Что случилось с хорошим старым JavaScript?Почему вы все пытаетесь выяснить это с помощью чистого 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 uncomment the next line
            //hasBeenClicked = false;
        });
    }

    return false;
});

В качестве примечания: никогда никогда никогда не используйте .live().Вместо этого используйте .delegate как:

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 uncomment the next line
            //hasBeenClicked = false;
        });
    }

    return false;
});

Почему?Пол Ирриш объясняет: http://paulirish.com/2010/on-jquery-live/

Чтобы ответить на ваш комментарий ...

Это может произойти, если ваша функция делегата вложена в ваш вызов AJAX (.load(), .get() и т. Д.).div.next должен быть на странице, чтобы это работало.Если div.next нет на странице, и это не является вложенным, просто сделайте это:

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

http://api.jquery.com/delegate/

Делегат нуждается в селекторе, который будет родительским длядинамически добавляемый элемент.Затем первый параметр делегата (div.next a в последнем примере) - это элемент, который нужно искать в выделенном элементе (#wrapper).Обертка также может быть body, если она не обернута ни в один элемент.

1 голос
/ 14 сентября 2011

Вы можете отменить привязку события click с помощью die():

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

Или вы можете присвоить элементу класс .clicked после нажатия на него:

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

И проверьте, существует ли этот класс при выполнении вашей логики:

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

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

    return false;
});
...