浏览器的后退按钮显示出奇怪的行为。 History.js
我有一个标签。 在更改所选项目时，使用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 ，它负责管理浏览器历史记录。 在这个函数中，我使用history.js来推送历史堆栈中的浏览器状态。 据我所知，在阅读了很多有关history.js的文章之后，应该在History.Adapter.bind()包含后退和前进按钮的操作。 问题是浏览器的后退按钮具有奇怪的行为：它们多次执行History.Adapter.bind()内部的函数，这是我已经通过触发onChange事件的次数的exaclty。
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); }
将History.Adapter.bind从manage_history函数manage_history 。 每次调用manage_history函数时都会重新绑定它。