PopState无法按预期工作。

时间:2016-02-28 03:22:26

标签: javascript ajax

我在主页上有一个图像列表,然后点击我发出一个AJAX请求,将内容加载到灯箱。我也有他们之间的分页。每次用户点击下一个或上一个箭头时,我都会使用PushState更改URL,但效果很好。我的后退按钮有问题。有时我需要点击两次或更多才能返回。如果它没有返回它,只需重新加载相同的内容。

$(document).on("click", ".content a", function(event){
  event.preventDefault();
  var url = $(this).attr("href");
  $("body").append($overlay);
  history.pushState({}, '', url);
  $.ajax({
      url : url,
      type : 'GET',
      success : function(data){
        $overlay.append(data);
        $overlay.show();
      }
  });
});

$(document).on("click", ".fa-angle-right", function(event){
  event.preventDefault();
  var url = $(this).parent("a").attr("href");
  history.pushState({}, '', url);
  $.ajax({
      url : url,
      type : 'GET',
      success : function(data){
        $overlay.html(data);
      }
  });
});

$(window).on("popstate", function(event) {
  var url = location.href;
  $.ajax({
      url : url,
      type : 'GET',
      success : function(data){
        $overlay.html(data);
      }
  });
});

1 个答案:

答案 0 :(得分:1)

你很可能两次推动相同的状态,可能是事件处理程序不止一次。

当您调试原因时,您将解决行为不端PopState的情况:)