jQuery Mobile:页面内重复的ID可以吗? [英] jquery mobile: duplicate IDs within pages ok?

问题描述

我制作了一个jQuery Mobile(最终版1.0)应用程序，但是我在Flickering方面遇到了一些问题.我知道这是jQM当前定义的错误，但是我想看看我能怎么解决这个问题.

I've made a jQuery Mobile (1.0 final) app, and I am having some issues with Flickering. I know this is a defined bug currently with jQM, but I wanted to see what I could do to resolve this issue.

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

The thread at here mentioned the following:

在同一页面中多次使用相同的#id时，可能会出现

闪烁， 当您使用一页模板方法时，这并非没有可能. 因此请确保不要多次使用#id.

flickering can occur when using the same #id more than once in a page, which is not unlikely when you are using the one page template method. so be sure to not use #id's more than once.

这对我来说有点模棱两可……显然，因为jQM确实加载了AJAX，所以任何时候都可能在DOM中有多个页面.就我而言，我的页面级ID都是唯一的，但是在页面内使用的多个ID并不是唯一的(例如，data-role=content div的每个页面的ID为#mainPageContent).

This is a bit ambiguous to me... Obviously because jQM does AJAX loads, multiple pages may be in the DOM at any one time. In my case, my page-level IDs are all unique, but several IDs used WITHIN the pages are not (e.g. the data-role=content div has the ID of #mainPageContent for each page).

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

Is this an acceptable behavior, or should my IDs be unique globally?

PS:对不起，如果这是一个骗子，我发现了一些与此问题类似的stackoverflow帖子，但是我没有什么特别的答案.

PS: Sorry if this is a dupe, I found a few stackoverflow posts that were similar to this question but nothing I felt really answered this specifically.

推荐答案

您的ID 在整个jQuery Mobile网站中必须唯一，以确保不会将相同的ID附加到DOM元素已经存在.

Your IDs must be unique throughout your whole jQuery Mobile website to make sure that the same ID is not appended to the DOM as an element that already exists.

一个很好的解决方法(由于您已经具有唯一的data-role="page" ID，因此请将页面中的其余ID更改为类:

A good work-around for this (since you already have unique data-role="page" IDs is to change the rest of the IDs in your pages to classes:

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

通过这种方式，您可以轻松地使用CSS/JS来定位元素，以对网站进行全局更改或定位到特定页面:

This way you can easily target elements with CSS/JS to make global changes to your site or target a specific page:

全球

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

特定于页面

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

这篇关于jQuery Mobile:页面内重复的ID可以吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！