jquery mobile: дубликаты идентификаторов на страницах хорошо?

Question

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

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

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

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

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

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

Answer 1

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

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

3.2.3.1 Атрибут id

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

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

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

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

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

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

Answer 2

Ваши идентификаторы должны быть уникальными для всего вашего веб-сайта jQuery Mobile , чтобы убедиться, что этот идентификатор не добавлен в 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>