浏览器的后退按钮显示奇怪的行为。 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函数时都重新绑定它。