4

我正在使用移动查询制作现有网站的移动版本。该站点有数百个页面，这些页面具有适用于 www 版本的已建立标记。问题是每个页面上都有许多相同元素 ID 的实例，例如 #username 或 #map 或 #photo。这在 www 上很好，因为每个页面都是独立加载的，所以没有冲突。在 JQM 中，看起来所有页面都以某种方式缓存在一起，并且代码引用了前一页。例如：

Page1.html

<div id="commonIdOnEveryPage">Page 1</div>
<a href="page2.html">Link</a>
<script>
alert($("#commonIdOnEveryPage").html());
</script>

Page2.html

<div id="commonIdOnEveryPage">Page 2</div>
<script>
alert($("#commonIdOnEveryPage").html());
</script>

单击第 1 页的链接转到第 2 页后，警报仍然显示“第 1 页”。

在这个例子中，很容易改变第二页的id，但是在实际的站点中，不同的页面上有数百个地方使用相同的ID，而JS有数千行长。当然有一种方法可以使 JQM 与此兼容。

4

6 回答 6

2

改用一个公共类，jQuery Mobile 一次在 DOM 中有多个页面，使您的“唯一”id 不唯一。

$(".ui-page-active .commonclass").html()

编辑：

如果 id 不能是唯一的，那么下一个最好的方法是：

$(".ui-page-active div[id=commonid]").html()
于 2012-07-17T18:32:30.790 回答
2

我发现这段代码似乎从缓存中删除了前一页，但保留了后退按钮和转换。

$('div').live('pagehide', function(event, ui) {
    $(event.target).remove();
});
于 2012-07-18T00:16:02.657 回答
2

汤姆金凯德的回答是一个专业提示。

只需稍微清理一下即可：1）减少从缓存中删除每个 div 的开销，以及 2）使其与新的 JQuery 约定保持同步

$(document).on('pagehide', '.ui-page', function(event, ui) {
    $(event.target).remove();
});

现在，缓存已清除以前的页面，并保留了后退按钮功能。

于 2013-09-27T14:56:23.827 回答
1

默认情况下，当您导航到 JQM 中的页面时，框架会通过 ajax 加载页面的内容并将其附加到 . DOM，因此您最终会得到每个页面的多个 id。您还可以链接到一个页面，以便它通过http使用 'rel="external" ordata-ajax="false"` 正常加载页面，我认为这应该可以解决您的问题，您需要确保适当的 js 文件虽然链接在每个页面的头部。

于 2012-07-17T19:41:24.377 回答
0

将使用：

$(document).ready(function(){
    alert('#commonIdOnEveryPage');
});

修理它？

于 2012-07-17T19:42:55.777 回答
0

我根据时间创建一个唯一的字符串并将其附加到每个 id。

// unique string for use in DOM ids
$unique = str_replace(array(' ', '.') ,'_', microtime());

然后在html输出中：

<div id="commonIdOnEveryPage<?php echo $unique; ?>">Page 2</div>
<script>
alert($("#commonIdOnEveryPage<?php echo $unique; ?>").html());
</script>
于 2014-01-10T15:34:06.727 回答