javascript - 浏览器的后退前进按钮显示出奇怪的行为。历史.js

Question

我有一个 <select>标签。在更改所选项目时，一些 <div> s 通过函数使用 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 的 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 函数时都会重新绑定(bind)它。