Iscroll не загружается на хэшируемую ссылку в jQuery Mobile

Question

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

http://www.example.com/#about.php (Это не работает с Iscroll, кстати, это, очевидно, не настоящий URL, просто пример синтаксиса)

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

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

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

ОБНОВИТЬ:

Вот синтаксис, который я использовал для ListView, который я связал со страницей ABA. Это основной синтаксис ListView, который я видел везде, где я читал об этом. Все, с чем я имею дело, это пятая ссылка прямо сейчас (о). Я не использую хэш в якоре, и все же он все еще связывает его с расположением хеширования. Что интересно, так это то, что это не так 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>

Answer 1

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

$(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() Поскольку страницы схватили Аякс, не уволят это событие, они стреляют page events Как указано здесь: http://jquerymobile.com/demos/1.0/docs/api/events.html

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

1. Помещать 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

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

ОБНОВИТЬ

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