Jquery mobile: дублировать идентификаторы внутри страниц в порядке?

Я сделал приложение jQuery Mobile (1.0 final), и у меня есть некоторые проблемы с Flickering. Я знаю, что это определенная ошибка в настоящее время с jQM, но я хотел посмотреть, что я могу сделать, чтобы решить эту проблему.

В потоке здесь упоминалось следующее:

мерцание может возникать при использовании одного и того же #id более одного раза на странице, что маловероятно, если вы используете метод шаблона одной страницы. поэтому не используйте #id более одного раза.

Это немного неоднозначно для меня... Очевидно, что поскольку jQM загружает AJAX, в DOM может быть одновременно несколько страниц. В моем случае мои идентификаторы уровня страницы уникальны, но несколько идентификаторов, используемых на страницах, не являются (например, у data-role=content div есть идентификатор #mainPageContent для каждой страницы).

Является ли это приемлемым поведением или мои идентификаторы уникальны во всем мире?

PS: Извините, если это обман, я нашел несколько сообщений stackoverflow, которые были похожи на этот вопрос, но я ничего не ответил на это конкретно.

Ответ 1

Ваши идентификаторы должны быть уникальными на всем вашем веб-сайте jQuery Mobile, чтобы убедиться, что тот же ID не добавлен в DOM как уже существующий элемент.

Хорошая работа для этого (поскольку у вас уже есть уникальные идентификаторы data-role="page", это изменить остальные идентификаторы на ваших страницах на классы:

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

Таким образом вы можете легко ориентировать элементы с помощью CSS/JS, чтобы делать глобальные изменения на вашем сайте или ориентироваться на определенную страницу:

GLOBAL

<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>

Ответ 2

Никакой дублированный идентификатор не подходит, поскольку атрибут Id должен быть уникальным идентификатором.

http://www.w3.org/TR/html5/elements

3.2.3.1 Атрибут id

Атрибут id указывает свой уникальный идентификатор элемента (ID). значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента и должен содержать хотя бы один символ. Значение не должно содержать любые пробельные символы.

Уникальный идентификатор элемента может использоваться для различных целей, прежде всего как способ ссылки на конкретные части документа с использованием идентификаторы фрагментов, как способ нацеливания элемента при написании сценариев, и как способ стилизации определенного элемента из CSS.

Если значение не является пустой строкой, пользовательские агенты должны связывать элемент с заданным значением (точно, включая любые пробельные символы) для сопоставления идентификаторов в домашнем поддереве элемента (например, для селекторов в CSS или для метода getElementById() в DOM).

Идентификаторы - это непрозрачные строки. Особые значения не должны быть полученный из значения атрибута id.

Эта спецификация не исключает элемент, имеющий несколько идентификаторов, если другие механизмы (например, методы DOM Core) могут устанавливать идентификатор элемента в путь, который не конфликтует с атрибутом id.

Идентификатор IDL должен отражать атрибут содержимого id.