jQuery Mobile не работает вторичный JavaScript

Question

Я создаю мобильную версию существующего сайта и ищу объяснение возникшей у меня проблемы (в качестве jQuery Mobile noob).

Эта страница имеет эффект отражения jquery на первом изображении: http://m.fijitourism.com/accommodation/coral-coast/bedarra-beach-inn/ (это делается путем применения эффекта к любому изображению с классом «отражения»).

Если вы идете прямо на страницу, js загружается, и отражение отлично работает на изображении. Однако, если вы перешли на страницу отсюда, родительскую страницу, отражение js не работает: http://m.fijitourism.com/accommodation/coral-coast/

Насколько я понимаю, это связано с загрузкой ajax в jquery mobile. Я обнаружил, что если я использую 'data-ajax = "false" в ссылке с родительской страницы, отражение js загружается нормально.

Мои вопросы:

-Есть ли лучший / более правильный способ добиться отражения без использования data-ajax = "false" в ссылке на родительскую страницу? Я понимаю, что это не то, для чего предназначен data-ajax = "false". Официальная документация гласит: «Если вы ссылаетесь с мобильной страницы, которая была загружена через Ajax, на страницу, содержащую несколько внутренних страниц», то я не являюсь.

- Объяснение того, почему загрузка ajax предотвращает отражение js, было бы здорово.

Answer 1

Оказалось, что в официальной документации я пропустил страницу, посвященную именно этой проблеме: http://jquerymobile.com/test/docs/pages/page-scripting.html

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

Событие pagecreate запускается на инициализируемой странице, верно после инициализации происходит. Мы рекомендуем связываться с этим событием вместо DOM ready (), потому что это будет работать независимо от того, страница загружается напрямую или если содержимое перетаскивается в другой страница как часть навигационной системы Ajax.

$ ('# aboutPage'). Live ('pagecreate', function (event) {alert ('Эта страница был только улучшен jQuery Mobile! '); });

Answer 2

Эта проблема объясняется здесь: http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html

Прежде всего, после того, как вы убедитесь, что ваш скрипт работает, когда вы обновляете страницу с помощью браузера, вы можете исправить решение jquerymobile.

По сути, сценарии должны использоваться на всех страницах навигации, а сценарии, специфичные для страниц, должны быть записаны внутри элемента data-role = "page". Так как на сайте jquerymobile не было хорошего примера, и было действительно сложно сделать эту работу, у меня есть пример, чтобы заставить код работать как на jquerymobile ajax-навигации, так и на обновлении страницы.

// this code is inside the data-role="page" element, as well as the possible script src tag
$(window).on('pageinit', function() {
     // do normal $(document).ready() code here basically
     });
 });

Answer 3

Я нашел способ решения этой проблемы, изменив способ загрузки своих страниц. Я поместил target = "_ self" в элемент href, чтобы он не загружался с помощью # system.

• Я добавлю ссылку ниже на мою страницу index.html, которая перейдет на мою страницу signup.html.

<a href="signup.html" target="_self" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">Signup</a>

ПРИМЕЧАНИЕ. Вы потеряете «необычную» функцию перехода на страницу jQuery Mobile