jquery Mobile - 浏览其他页面后，javascript停止工作

Question

我正在使用jquery mobile最新版本。一切正常。我有一些自定义的外部和内部JS脚本。主页中有一个jquery幻灯片，它运行良好，但当我导航到另一个页面并返回到主页通过按后退按钮或单击任何链接页面，幻灯片停止工作。

如果我添加了这些链接data-ajax="false"，那么幻灯片放映在每种情况下都能正常运行。但我不想使用data-ajax="false"来快速回复。我怎么解决这个问题？我在jquery mobile中有点新鲜。

Answer 1

尝试在页面加载时执行此操作：

$(document).ready(function(){
    $('div[data-role=page]').page('destroy').page();
});

它应该刷新你的页面，让一切都恢复正常。

Answer 2

根据docs，当您在jQuery Mobile中的页面之间导航时，默认情况下会重新加载内容。当您使用data-ajax="false"强制jQuery Mobile完全重新加载页面时，您的脚本正在运行。

您似乎有以下幻灯片调用：

$(function(){
     // init gallery on DOM ready
     $('.gallery').slideshow();
});

但是，当您使用jQuery Mobile在页面之间导航时，您需要在重新加载特定页面时重新初始化您的图库，因此通用代码将如下所示：

$(document).bind('pageinit', function() {
     // init gallery when current page loaded
     $('.gallery').slideshow();
});