Я играю с jQuery и jQuery mobile уже несколько недель. У меня есть довольно простой пример, который, похоже, указывает на довольно неприятную ошибку в jQuery для мобильных устройств, поэтому я хотел посмотреть, что я делаю, что-то не так.
Что происходит, так это то, что у меня есть одна страница (назовите ее index2.html), которая служит домашней страницей. Затем у меня есть вторая страница (dc2.html), где находится основная функциональность веб-приложения. dc2.html - многостраничный шаблон; то есть он содержит два элемента div, которые объявляют data-role = "page". Как вы можете догадаться, в dc2.html я предоставляю ссылки с первого div "page" на второй div "page" и наоборот.
Если я вручную ввожу URL для dc2.html прямо в браузер, то это взаимодействие работает нормально. Однако, если я начну с index2.html и перейду по его ссылке на dc2.html, я нажму / коснусь по ссылке, чтобы загрузить второй div 'data-role = "page"', браузер вместо этого сделает сетевой вызов index2 .html и загружает это снова!
В случае необходимости URL-адреса имеют вид www.XXXX.com / software_utilities / mobile / index2.html и www.XXXX.com / software_utilities / mobile / dc2.html , поэтому они находятся во вложенных папках, хотя обе находятся в одной и той же вложенной папке.
Вот код (разумеется, для упрощения демонстрации этой проблемы) для index2.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page">
<div data-role="header">
<h1>Utilities</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="d">
<li><a href="/software_utilities/mobile/dc2.html">DC</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
и код для dc2.html:
<!DOCTYPE html>
<html>
<head>
<title>Date Format</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<!-- Start of main page -->
<div data-role="page" id="main">
<div data-role="header">
<a href="index2.html" data-direction="reverse" data-role="button" data-inline="true">Home</a> <h1>Page One</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#page_two">Click/tap me to go to page 2</a>
</div><!-- /main content -->
</div><!-- /main page -->
<div data-role="page" id="page_two">
<div data-role="header">
<a href="#main" data-direction="reverse" data-role="button" data-inline="true">Back</a> <h1>Page Two</h1>
</div><!-- /header -->
</div><!-- /dateformat page -->
</body>
</html>
Любое понимание будет с благодарностью; Спасибо!