iScroll не загружается по хэшированной ссылке в jQuery Mobile - PullRequest
Новая
       20

iScroll не загружается по хэшированной ссылке в jQuery Mobile

1 голос
/ 12 января 2012

Я настроил iScroll на вложенный div на одной из моих страниц с подробностями на мобильном сайте jQuery. В основном, что происходит, когда я нажимаю кнопку на главной странице (для страницы «о»), она переходит в местоположение с хешированной ссылкой (используя Ajax из того, что я собрал). Пример:

http://www.example.com/#about.php (это не работает с iScroll, кстати, это явно не реальный URL, просто пример синтаксиса)

В основном, когда я загружаю URL-адрес сам по себе (как нехешированная ссылка), iScroll работает нормально, но когда он загружается при нажатии на главной странице, iScroll не загружается и не работает. Пример:

http://www.example.com/about.php

Как получить привязку для <li> для ссылки на прямую ссылку, а не для хешированной ссылки ИЛИ лучше узнать, как заставить jScascript iScroll загружаться в загруженную ссылку Ajax? Спасибо за помощь.

UPDATE:

Вот синтаксис, который я использовал для просмотра списка, который я связал со страницей about. Это основной синтаксис списка, который я видел везде, где я его читал. Все, с чем я имею дело, это пятая ссылка прямо сейчас (ОБ). Я не использую хеш в якоре, но он все еще связывает его с хешированным местоположением. Что интересно, это не http://www.example.com/index.php#about.php, а просто http://www.example.com/#about.php.

<ul data-role="listview">
        <li><a href="#nav1">TEST</a></li>
        <li><a href="#nav1">TEST 2</a></li>
        <li><a href="#nav1">TEST 3</a></li>
        <li><a href="#nav1">TEST 4</a></li>
        <li><a href="about.php">ABOUT</a></li>
 </ul>

1 Ответ

1 голос
/ 13 января 2012

Я предполагаю, что вы связываете инициализацию iScroll с обработчиком document.ready. Если это так, то вам нужно изменить это на делегированный обработчик событий (это стандартная практика jQuery Mobile): 

$(document).delegate('#about-page-id', 'pageinit', function () {
    var myScroll = new iScroll('id-of-element');
});

Внимание! Используйте pageInit (), а не $ (document) .ready ()

Первое, чему вы научитесь в jQuery, это вызвать код внутри $ (document) .ready (), поэтому все будет выполнено, как только DOM загружен. Однако в jQuery Mobile Ajax используется для загрузки содержимое каждой страницы в DOM во время навигации, и DOM готов Обработчик выполняется только для первой страницы. Выполнять код всякий раз, когда Новая страница загружается и создается, вы можете привязать к событию pageinit. Это событие подробно объясняется внизу этой страницы.

Источник: http://jquerymobile.com/demos/1.0/docs/api/events.html

Короче говоря, jQuery Mobile использует AJAX для загрузки новых страниц в DOM, что имеет ряд побочных эффектов.

  1. Все идентификаторы должны быть уникальными для всего сайта, поскольку в DOM одновременно может находиться несколько страниц.
  2. При ссылке на внешнюю страницу (<a href="about.html">About</a>) будет захватываться только элемент data-role="page" и его потомки (все остальное будет игнорироваться).
  3. Вы не можете полагаться на $(document).ready(), поскольку страницы, перехваченные через AJAX, не запускают это событие, они запускают page events, как указано здесь: http://jquerymobile.com/demos/1.0/docs/api/events.html

Если вы хотите принудительно выполнить перезагрузку при ссылке на другую страницу, есть несколько вариантов:

  1. Put rel="external" on the link tag: `
  2. Поставьте data-ajax="false" на теге ссылки: <a data-ajax="false" href="about.html"></a>
  3. Глобальное отключение обработки ссылок AJAX: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

Но учтите, что использование любого из этих методов отключит переходы.

UPDATE

Если вы получаете хешированные ссылки, это означает, что вы либо отключили функцию historyPushState, либо используете старую версию jQuery Mobile. Если вы используете старую версию, я настоятельно рекомендую обновить ее до 1.0 (в версии 1.0 RC3 и 1.0 Final очень много производительности): http://jquerymobile.com/download/

...