jquery-mobile：页面内的ID重复，可以吗？

我制作了一个jQuery Mobile（1.0最终版）应用程序，我遇到了一些闪烁问题。我知道这是jQM当前定义的错误，但我想看看我能做些什么来解决这个问题

此处的线程提到了以下内容：

在一页中多次使用同一#id时，可能会出现闪烁， 当您使用单页模板方法时，这是不可能的。 因此，请确保不要多次使用#id

这对我来说有点模棱两可。。。显然，由于jQM进行AJAX加载，DOM中可能同时存在多个页面。在我的情况下，我的页面级别ID都是唯一的，但页面中使用的几个ID不是唯一的（例如，

data role=content

div的ID为

#mainPageContent

）

这是一种可接受的行为，还是我的ID在全球范围内是唯一的

---

PS：如果这是一个重复，很抱歉，我发现了一些类似于此问题的stackoverflow帖子，但我觉得没有什么东西能真正回答这个问题。

没有重复的Id是不好的，因为Id属性是唯一的标识符

3.2.3.1id属性

id属性指定其元素的唯一标识符（id）。这个 值在元素的主子树中的所有ID中必须是唯一的 并且必须至少包含一个字符。该值不能包含 任何空格字符

元素的唯一标识符可用于多种用途， 最值得注意的是，使用 片段标识符，作为脚本编写时以元素为目标的一种方法， 作为从CSS中设计特定元素的一种方式

如果该值不是空字符串，则用户代理必须将 具有给定值的元素（确切地说，包括任何空格字符） 为了在元素的主子树中进行ID匹配 （例如，用于CSS中的选择器或 DOM）

标识符是不透明的字符串。特定含义不应被忽略 从id属性的值派生

如果需要，本规范不排除具有多个ID的元素 其他机制（例如DOM核心方法）可以在 与id属性不冲突的方式

id IDL属性必须反映id content属性

---

在整个jQuery移动网站中，您的ID必须是唯一的，以确保同一ID不会作为已经存在的元素附加到DOM中

解决这个问题的一个好办法是（因为您已经有了唯一的

data role=“page”

id，将页面中的其余id更改为类：

<div data-role="page" id="home">
    <div class="mainPageContent" data-role="content"></div>
</div>

通过这种方式，您可以轻松地使用CSS/JS以元素为目标，对站点进行全局更改或以特定页面为目标：

全球

<style>
.mainPageContent {
    color : gold;
}
</style>
<script>
$(document).delegate('.mainPageContent', 'click', function () {
    //...
});
</script>

.mainPageContent{
颜色：金色；
}
$（文档）.delegate（'.mainPageContent'，'click'，函数（）{
//...
});

特定页面

<style>
#home > .mainPageContent {
    color : magenta;
}
</style>
<script>
$(document).delegate('#home > .mainPageContent', 'click', function () {
    //...
});
</script>

#主页>主页内容{
颜色：洋红色；
}
$（文档）.delegate（'#home>.mainPageContent'，click'，函数（）{
//...
});

由于它都加载到DOM中，我会怀疑Id有冲突。我想我会为每个页面重构Id，并使其唯一，以符合HTML5标准。感谢你们两位的回答。我想是这样的，我只是想在投入时间重构之前检查一下。：）