jQuery Mobile - 滑动 - 停止处理新页面加载

Question

所以我设置了一个基本代码来使用 jQuery Mobile，它在向左滑动时会移动两个特定的 div，然后在向右滑动时将它们移回。很简单，它在它加载的页面上工作得很好，但是当你点击一个新页面并加载它时，滑动不再起作用。

请参阅下面附上的我的代码以供参考：-

$(document).on("pageinit",function(){
    $(document).on("swipeleft swiperight", function(e){
            if (e.type === "swipeleft") {
                $("#headerContainer").css({left:'-60px'});
                $("#mainContainer").css({marginLeft:'0px'});
            } else if (e.type === "swiperight") {
                $("#headerContainer").css({left:'0px'});
                $("#mainContainer").css({marginLeft:'60px'});
            }
    });
});

我已经尝试过寻找某种解决方案但无济于事，因此我们将不胜感激任何帮助，谢谢。

Answer 1

原来问题出在 jQuery Mobile 的工作方式上。由于 jQuery Mobile 通过看似 ajax 的方式加载页面，这意味着页面并没有真正刷新并再次声明 div，从而导致与 ID 相关的问题，因此选择 Classes 解决了这个问题。