popstate HTML 5事件被解雇多次

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” ......

程序逻辑：

1. 页面加载
2. onclick将执行loadNextBackInPage（）
3. 在完成启动$。员额（）请求与火 “callBackFunctionLoadNextBackInPage”
4. pushState的（）
5. 注册为 “popstate”
6. 当 “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'); 
}