Конфликт идентификатора DOM мобильного Jquery при загрузке страниц AJAX

Question

У меня есть некоторые элементы в моем HTML, например, пользовательское изображение загрузки, которое я добавляю в раздел заголовка

<div data-role="page" id="home">


<div data-role="header" data-position="inline">
<div class='spinner'><img id="loading" src="css/images/loading.gif"/></div>
    <h1>title</h1>

</div>

</div>

И чтобы показать это, я просто называю идентификатор изображения как $('#loading).show();

Проблема в том, что у меня есть этот макет на других страницах, и когда я загружаю новую страницу через AJAX, он добавляет новый DOM в конец документа, поэтому выбранное изображение с первой страницы, на которой я был НЕ второй.

 <div data-role="page" id="page2">


<div data-role="header" data-position="inline">
 //this image will not show 
<div class='spinner'><img id="loading" src="css/images/loading.gif"/></div>
    <h1>title for page 2</h1>

</div>

</div>

Теперь я знаю, что для этого есть обходные пути, например, я могу дать ему имя класса и назвать его таким образом, но это более фундаментальный вопрос о том, как jquery обрабатывает внедрение DOM. Вы могли бы подумать, что было бы достаточно интуитивно понятно находить элементы, основанные на активной странице, или, может быть, я что-то упустил.

Answer 1

Ответ также имеет основополагающее значение ... Ваши идентификаторы должны быть уникальными на всем сайте, когда вы используете jQuery Mobile, чтобы у вас не было "коллизий", которые вы получаете.

Однако вы можете использовать объект $.mobile.activePage, чтобы найти элемент только на текущей странице:

$.mobile.activePage.find('#loading').show();

Вот демонстрационная версия: http://jsfiddle.net/QWzDB/ (обратите внимание, что в предупреждении используется текст со страницы, которая не отображается)

Answer 2

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

Но да, ответ идет в сторону использования классов для всего и поиска по активной странице, я обнаружил, что использование идентификаторов вызывает путаницу, потому что $ ('# id') больше не надежен. У меня есть более полный ответ здесь: Jquerymobile - $ .mobile.changepage

Если вы установите его правильно, он может быть довольно симпатичным:

1. Вы можете ссылаться на $ .mobile.activePage в любое время после события pagehow
2. Используйте новый jQuery на , чтобы привязать живые события только к активной странице div, все события на странице всплывают до корневого div [data-role = "page"], а затем в этом обработчике. Вы можете ссылаться на текущую страницу с помощью $ .mobile.activePage