Ajax加載器和事件運行不止一次

Question

我有一個網頁，頁面的內容由ajax加載。我所有的頁面實際上都是分開的文件，當我需要調用一個頁面時，我只是將鏈接傳遞給了我的「pageLoader」函數。

pageLoader句柄，加載內容並重新啓動/重新定義必要的功能，如關閉按鈕。

由於實際功能有250行，我重新寫了一個短版本;

var pageLoader = function(link){ 
    var page = $(link).attr("href").replace('#',''); 

    if(page != lastCalledURL){ 

     // Load the page. 

     $.ajax({ 
      beforeSend: function(){ /* remove previously loaded content; */ }, 
      success: function(data){ 

       // remove the loaded content if user clicked to close button. 

       $("a.close-button").live("click", function(){ 
        $(this).parent().fadeOut().remove(); 
        return false; 
       }); 

       // load another page if user click another page's link. 


       $("a.content-loader-link").live("click",function(){ 
        pageLoader(this); 
       }); 

       // handle with tabs 

       $("a.tabs").live("click", function(){ 
        var index = $("a.tabs").index(this); 
        console.log(index); 
        return false; 
        }); 

      } 
     }); 

     lastCalledURL = page; 

    } 

    return false; 

好的。如果我點擊頁面中的鏈接，它會調用pageLoader。如果我點擊其中一個鏈接，pageLoader會調用一次。如果我點擊另一個鏈接，pageLoader會調用兩次。如果我再次點擊另一個鏈接，第三次調用pageLoader等等。

同樣的事情發生在代碼中與「實時」功能綁定的鏈接。如果我點擊a.tabs，它將寫入控制檯twite。如果我點擊另一個.tabs鏈接，它會向控制檯寫入四次，並且每次點擊次數增加兩倍。

我不爲什麼會發生。如果您有任何想法，請告訴我。

Answer 1

您可以使用bind和unbind來解決此問題。就像這樣：

$("a.tabs").unbind('click').bind("click", function(){ 
    var index = $("a.tabs").index(this); 
    console.log(index); 
    return false; 
}); 

但我寧願您在$（文件）中附加此事件，而不是每次的.ready函數你做一個AJAX調用。

$(document).ready(function() { 
    // Attach your events here. 
}); 

Answer 2

那些live事件處理程序"Attach a handler to the event for all elements which match the current selector, now and in the future."所以你不應該需要他們在你的ajax通話。