我的主页上有一个图像列表,单击后我会触发 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);
}
});
});
最佳答案
您很可能会两次推送相同的状态,可能事件处理程序会触发多次。
当您调试原因时,您将解决 PopState 行为不当的情况:)
关于javascript - PopState 未按预期工作。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35678324/