Question

我有一个<select>标签。在更改所选项目时，使用AJAX通过以下函数更新某些<div>：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()内的函数，这是我已经通过<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函数时重新绑定它。

浏览器的后退按钮显示出奇怪的行为。 History.js

1 个答案: