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/

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

Мои вопросы:

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

Прежде всего, после того, как вы убедитесь, что ваш script работает при обновлении страницы с помощью браузера, вы можете исправить решение 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
     });
 });

Ответ 3

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