У меня есть две простые страницы.Для них я использовал jQuery Mobile 1.4.5, последнюю стабильную версию.
test2.php - просто ссылка на test.php
<!doctype html>
<html>
<head>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="test2" data-dom-cache="false">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Test2</h1>
</div>
<div role="main" class="ui-content">
<a href="test.php" class="ui-btn ui-btn-inline ui-icon-action ui-btn-icon-left ui-corner-all ui-shadow">Go to Test</a>
</div>
</div>
</body>
</html>
test1.php - Официальный пример вкладок из http://demos.jquerymobile.com/1.4.5/tabs/#Usenavbarfortabs
<!doctype html>
<html>
<head>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="test" data-dom-cache="false">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Test</h1>
</div>
<div role="main" class="ui-content">
<a href="test2.php" class="ui-btn ui-btn-inline ui-icon-action ui-btn-icon-left ui-corner-all ui-shadow">Go to Test2</a>
<div id="tabs" data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" data-ajax="false">one</a></li>
<li><a href="#two" data-ajax="false">two</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Поведение ссылки по умолчанию: Ajax
Чтобы включить переходы анимированных страниц, все ссылки, которые указывают на внешнюю ссылкустраница (например, products.html) будет загружена через Ajax.Чтобы сделать это ненавязчиво, платформа анализирует href ссылки, чтобы сформулировать запрос Ajax (Hijax), и отображает счетчик загрузки.Все это выполняется автоматически с помощью jQuery Mobile.
Если запрос Ajax выполнен успешно, новое содержимое страницы добавляется в DOM, все мобильные виджеты автоматически инициализируются, затем новая страница анимируется в виде спереход на другую страницу.
Если запрос Ajax завершится неудачно, платформа отобразит небольшое наложение сообщения об ошибке (стилизованное в образце "a"), которое исчезнет через короткое время, поэтому это не нарушит навигационный поток.Просмотрите пример сообщения об ошибке.
Итак, если я просматриваю страницу, эта страница полностью загружается и становится главной страницей.Любая страница отныне будет загружена с помощью Ajax.Эти страницы лишены дополнительного кода, и jQuery загрузит только первый DIV, помеченный как data-role = "page".
Проблема Если я перехожу из test.php, то вкладкиработают нормально.Если я нажимаю ссылку на test2.php, то вторая страница загружается в память и запускается, как и ожидалось.Но если я начну навигацию с test2.php и перейду по ссылке на test.php, все сойдет с ума.Вкладки не работают, а навигация по страницам оставляет в памяти несколько лишенных символов <span class="ui-icon-loading"></span><h1>loading</h1>.Использование вперед / назад оставляет иногда дублирующиеся страницы в памяти.Кроме того, если страницы немного сложнее, есть и другие сумасшедшие вещи.Пожалуйста, скажите мне, где я делаю неправильно.Я хочу полностью понять, что происходит.
Я сделал вывод, что инициирование элемента TABS порождает все проблемы.Это происходит только в том случае, если элемент не инициализирован на главной / первой странице (что невозможно).Если он загружен с помощью Ajax, то весь jQuery завершается ошибкой.Но я не хочу загружать как внешнюю страницу или без ajax.
jQuery Mobile 1.4.5 Источник: http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js