Question

我使用查询移动设备创建现有网站的移动版本。该网站有数百个页面，已建立的标记适用于www版本。问题是每个页面上有许多相同元素ID的实例，如#useername或#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与此兼容。

Answer 1

使用通用类，jQuery Mobile一次在DOM中有多个页面，使您的“唯一”ID非唯一。

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

编辑：

如果id不能是唯一的，那么下一个最好的事情就是：

$(".ui-page-active div[id=commonid]").html()

Answer 2

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

$('div').live('pagehide', function(event, ui) {
    $(event.target).remove();
});

Answer 3

Tom Kinkaid的答案是专家提示。

只需稍微清理一下：1）减少从缓存中删除每个div的开销，以及2）使用新的JQuery约定使其更新

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

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

Answer 4

By default当您导航到JQM中的页面时，框架通过ajax加载页面内容并将其附加到DOM，因此每页最多会有多个id。你也可以link to a page使用'{= 1}}正常加载页面，使用'rel =“external”http data-ajax =“false”`我认为应该解决你的问题，你需要确保在每个页面的头部链接了相应的js文件。

Answer 5

将使用：

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

修好吗？

Answer 6

我根据时间创建一个唯一的字符串，并将其附加到每个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>

使用Jquery Mobile在站点的不同页面上使用相同的ID冲突

6 个答案: