Ответ 1
Введение
Эта статья также может быть найдена ЗДЕСЬ как часть моего блога.
Как jQuery Mobile обрабатывает изменения страницы
Чтобы понять эту ситуацию, вам нужно понять, как работает jQuery Mobile. Он использует ajax для загрузки других страниц.
Первая страница загружается нормально. Его HEAD и BODY загружаются в DOM, и они ждут другого контента. Когда загружается вторая страница, содержимое BODY загружается в DOM. Точнее, даже BODY не загружен полностью. Будет загружен только первый div с атрибутом data-role = "page", все остальное будет отброшено. Даже если у вас больше страниц внутри BODY, только первый будет загружен. Это правило применяется только к последующим страницам, если у вас больше страниц в начальном HTML, все они будут загружены.
Вот почему ваша кнопка успешно показывается, но событие click не работает. То же событие щелчка, чей родительский HEAD не учитывался во время перехода страницы.
Вот официальная документация: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
К сожалению, вы не найдете этого в своей документации. Эфир думает, что это общее знание, или они забыли описать это, как и мои другие темы. (Документация jQuery Mobile большая, но не хватает многих вещей).
Решение 1
На второй странице и на каждой другой странице переместите тэг SCRIPT в BODY, например:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
Это быстрое решение, но все же уродливое.
Рабочий пример можно найти в моем другом ответе здесь: Страницы не запускаются после изменения
Другой рабочий пример: Страница загружена по-другому с переходом jQuery-mobile
Решение 2
Переместите все ваши javascript в исходный первый HTML. Соберите все и поместите его в один файл js в HEAD. Инициализируйте его после загрузки jQuery Mobile.
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
В конце я расскажу, почему это является частью хорошего решения.
Решение 3
Используйте rel= "external" в ваших кнопках и каждом элементе, который вы используете для изменения страницы. Из-за этого ajax не будет использоваться для загрузки страницы, а ваше приложение jQuery Mobile будет вести себя как обычное веб-приложение. К сожалению, это не очень хорошее решение в вашем случае. Телефонная связь никогда не должна работать как обычное веб-приложение.
<a href="#second" class="ui-btn-right" rel="external">Next</a>
Официальная документация, найдите главу: Связь без Ajax
Реалистичное решение
Реалистичное решение будет использовать Решение 2. Но в отличие от решения 2, я бы использовал тот же файл index.js и инициализировал его внутри HEAD всех возможных других страниц.
Теперь вы можете задать мне ПОЧЕМУ?
Phonegap, как jQuery Mobile, глючит, и рано или поздно произойдет ошибка, и ваше приложение будет терпеть неудачу (включая загруженный DOM), если ваш каждый js-контент находится внутри одного файла HTML, DOM можно удалить, а Phonegap обновит вашу текущую страницу. Если на этой странице нет javascript, это не сработает до перезапуска.
Заключительные слова
Эта проблема может быть легко исправлена с хорошей архитектурой страницы. Если кто-то заинтересован, я написал СТАТЬЯ о хорошей архитектуре страницы jQuery Mobile. В оболочке ореха я обсуждаю, что знание того, как работает jQuery Mobile, - это самое важное, что вам нужно знать, прежде чем вы сможете успешно создать первое приложение.