JQuery Mobile не работает с дополнительным javascript

Я создаю мобильную версию существующего сайта, и я ищу объяснение проблемы, которую я имею (как 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, было бы замечательно.

Solutions Collecting From Web of "JQuery Mobile не работает с дополнительным javascript"

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

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

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

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

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

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

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

// 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 }); }); 

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

  • Я поставлю ссылку ниже на моей странице 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 «fancy»