jQuery .load() Cách ngăn tải hai lần từ việc nhấp đúp vào

Question

Tôi đang sử dụng hàm load() của jQuery để tải một số trang vào vùng chứa. Đây là mã:

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

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

return false; 

}); 

Tất cả mọi thứ làm việc tốt nhưng vấn đề là khi tôi nhanh chóng nhấn đúp chuột vào liên kết div.next, từ giao diện điều khiển tôi thấy rằng nó tải trang hai lần vì tôi đã làm một cú nhấp đúp nhanh chóng. Tôi thậm chí có thể làm cho nó 3 lần nhấp chuột và nó sẽ được tải lên 3 lần và hiển thị trong giao diện điều khiển smth như thế:

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

Câu hỏi của tôi là làm thế nào để ngăn chặn nhấp đúp như vậy và không để tải các trang mục tiêu nhiều hơn sau đó một lần không vấn đề đã được nhấp bao nhiêu lần.

Cảm ơn bạn.

Answer 1

Bất cứ điều gì xảy ra với JavaScript tốt? Tại sao tất cả các bạn đang cố gắng tìm ra nó với jQuery thuần túy?

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

Là một mặt lưu ý, never never không bao giờ sử dụng.live(). Sử dụng .delegate thay thế như:

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

Tại sao? Paul Irish giải thích: http://paulirish.com/2010/on-jquery-live/

Để trả lời bình luận của bạn ...

Điều này có thể xảy ra nếu bạn có chức năng đại diện của mình lồng vào bên trong cuộc gọi của bạn AJAX (.load(), .get(), vv). div.next phải ở trên trang để hoạt động. Nếu div.next không phải là trên trang web, và điều này không được lồng nhau, chỉ làm điều này:

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

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

Đại biểu cần chọn được phụ huynh của các yếu tố tự động thêm vào. Sau đó, tham số đầu tiên của đại biểu (div.next a trong ví dụ cuối cùng) là phần tử cần tìm trong phần tử đã chọn (#wrapper). Trình bao bọc cũng có thể là body nếu nó không được bao bọc trong bất kỳ phần tử nào.

Answer 2

Bạn có thể unbind sự kiện click với die():

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

Hoặc bạn có thể cung cấp cho các phần tử một lớp .clicked khi nó được nhấp:

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

Và kiểm tra xem lớp đó tồn tại khi thực hiện bạn logic:

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

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

    return false; 
}); 

Answer 3

Bạn co uld thử sử dụng phương pháp jquery one:

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

Answer 4

Lưu trữ xem bạn có đang đợi tải trong biến hay không.

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

})()