瀏覽器的後退按鈕顯示奇怪的行爲。 History.js

Question

我有一個<select>標籤。在更改所選項目時，某些<div>可通過以下功能使用AJAX進行更新：update_div1, update_div2, update_div3。管理該操作的代碼如下，並且運行良好：

$('select.select-x').change(function(e) { 

    e.preventDefault(); 

    var value = $('select.select-x option:selected').val(); 
    var text = $('option:selected').text(); 

    update_div1(value); 
    update_div2(value); 
    update_div3(value); 
    manage_history(value,text); 

    return false; 

}); 

的問題是在過去的功能manage_history這是RESPONSABLE管理瀏覽器的歷史。在這個函數中，我使用history.js來推動歷史堆棧中的瀏覽器狀態。正如我在閱讀關於history.js的關於SO的許多文章後知道的那樣，後退和前進按鈕的動作應該被包括在History.Adapter.bind()中。問題在於瀏覽器的後退按鈕有一些奇怪的現象：他們多次執行History.Adapter.bind()以內的功能，這就是我已經通過<select>觸發了onChange事件的次數。

的manage_history的代碼是：

function manage_history(str,str2) 
{ 

    var History = window.History; 
    if (!History.enabled) { return false; } 

    var path = 'http://localhost/enc/?p='+str; 

    History.pushState({myid:str},str2,path); 

    History.Adapter.bind(window,'statechange',function() { 

     var State = History.getState(); 

     update_div1(State.data.myid); fter 
     update_div2(State.data.myid); 
     update_div3(State.data.myid); 
    }); 
} 

我希望我是清楚的。感謝您的幫助。

後theBrain貢獻整體解決方案：

$('select.select-x').change(function(e) { 

    e.preventDefault(); 

    var value = $('select.select-x option:selected').val(); 
    var text = $('option:selected').text(); 

    manage_history(value,text); 

    return false; 

}); 

History.Adapter.bind(window,'statechange',function() { // Note: Using statechange instead of popstate 

     var State = History.getState(); 

      update_div1(value); 
     update_div2(value); 
      update_div3(value); 

    }); 

function manage_history(str,str2) 
{ 

    var History = window.History; 
    if (!History.enabled) { return false; } 

    var path = 'http://localhost/enc/?p='+str; 

    History.pushState({myid:str},str2,path); 

     update_div1(State.data.myid); 
     update_div2(State.data.myid); 
      update_div3(State.data.myid); 

} 

Answer 1

招History.Adapter.bind遠離manage_history功能。每次調用manage_history函數時都重新綁定它。