Question

您好我正在使用以下代码使用jquery

动态加载页面的一部分

loadNextBackInPage_URL = null;
function callBackFunctionLoadNextBackInPage(data)
{
    //alert(data);
    $("#left").fadeTo(100,1);
    var data = $(data).find( '#left' );
    $("#left").html(data);
    if(supports_history_api())
    {
        history.pushState(null, null, loadNextBackInPage_URL);
        window.addEventListener("popstate", function(e) {
        alert('s');
        loadNextBackInPage(location.pathname);
        });
    }
    else
    {

    }
}
function loadNextBackInPage(url,parm)
{
    //alert(url);
    loadNextBackInPage_URL = url;
    $("#left").fadeTo(100,.2);
    $.post(url,parm,callBackFunctionLoadNextBackInPage,'html');


}

加载部分甚至更改浏览器URL都有效。但为什么PoP状态函数被多次触发？

我最初通过onclick函数调用loadNextBackInPage（）。

Answer 1

我在codingforums

中解决了这个问题

认为你继续添加“popstate”   听众一遍又一遍......

程序逻辑：

页面已加载
onclick将执行loadNextBackInPage（）
启动$ .post（）请求并在完成时触发“callBackFunctionLoadNextBackInPage”
pushState的（）
为“popstate”
当“popstate”触发时，执行loadNextBackInPage（）并返回步骤2

所以第4步将执行并执行   将注册新活动   听众。每次“popstate”开火   所有事件监听器都将执行

尝试移动addEventListener   方法调用此循环

因此，我从那些派生出一种变通方法，并将location.pathname更正为location.href

更正的代码：

loadNextBackInPage_URL = null;
popEventListnerAdded = false;


function callBackFunctionLoadNextBackInPage(data)
{
    //alert(data);
    $("#left").fadeTo(100,1);
    var data = $(data).find( '#left' );
    $("#left").html(data);
    if(supports_history_api())
    {
        history.pushState(null, null, loadNextBackInPage_URL);  
        if(!popEventListnerAdded) {
            window.addEventListener("popstate", function(e) {
            loadNextBackInPage(location.href);
            });
            popEventListnerAdded = true;
        }

    }
    else
    {

    }
}
function loadNextBackInPage(url,parm)
{
    //alert(url);
    loadNextBackInPage_URL = url;
    $("#left").fadeTo(100,.2);
    $.post(url,parm,callBackFunctionLoadNextBackInPage,'html');
}

popstate HTML 5事件被多次触发

1 个答案: