Question

我正在使用jQuery Mobile进行一些测试，并试图弄清楚如何设置应用程序及其各种页面。理想情况下，我希望框架加载具有转换的页面，但仍然保持每个页面明确分开。特别是，通过Ajax加载的页面似乎没有“清除”上一页的JavaScript或CSS：

示例1 - JavaScript

例如，如果我在page1.html中有类似的内容：

<script>
    setInterval(function() {
        console.info('Interval' + (new Date()));
    }, 1000);
</script>

然后，如果我加载page2.html，则间隔仍在运行。如果我回到page1，则会启动一个新的时间间隔，因此现在有两个时间间隔在运行，而每次返回page1时都会有3和4等。

示例2 - CSS

另一个问题是造型。假设两个开发人员在两个不同的页面上独立工作，创建了一个元素my-element。在page1中，此元素的样式为：

<style>
    #my-element {
        color: red;
    }
</style>

<span id="my-element">This one is red</span>

在page2中

，该元素未设置样式：

<span id="my-element">This one has no style</span>

同样，如果我首先转到page1.html，然后转到page2.html，my-element最终会变为红色，即使它未在page2.html中设置样式。

所以我猜我有两个问题：

目前，jQuery Mobile加载页面的方法似乎根本无法扩展。 CSS，JS在一个页面上创建，继续下一个。那么有没有办法让jQuery Mobile加载页面“干净利落”。即完全删除上一页中的所有内容，以便JS或CSS的位不影响下一页？
如果没有，在jQuery Mobile中以可扩展的方式处理多个页面的正确方法是什么？

Answer 1

您所描述的行为是JQM工作的原因。您的DOM仍然存在（包括您加载的第一页的js和css），直到您使用'data-ajax = false'或'rel = external'加载页面，这将执行常规页面加载（没有ajax）。

通过ajax加载页面，你将在DOM中至少有两个页面 - 你开始的页面（如一个锚页面）和你通过ajax加载的任何其他页面（在下一页是加载）。

这种方法允许转换和其他功能，您可以跨页面共享。

仍然可以使用js / css轻松定位特定页面。我总是在我的应用程序中运行一个controller.js文件，它通过绑定到任何JQM事件来处理页面特定的事情（pagebeforeshow，pageshow ...）。同样，对于页面特定的css，只需使用页面id属性来使css页面特定。