Я знаю, когда вы переключаете страницы с помощью jquery mobile, используя ajax, он только захватывает DOM в теле с помощью data-role="page". Проблема в том, что это приложение для мобильного телефона, работающее на мобильном устройстве, поэтому полная загрузка страниц без ajax довольно медленна, получая все сценарии JS, CSS.Есть ли способ захватить javascript на jquery mobile ajax load
Я искал разные вещи. Документы говорят, что вы можете добавить javascript в dom и поставить его под элемент data-role="page", но я все еще не могу заставить его запускать этот путь.
То, что я сейчас пытаюсь это есть сценарий начальной загрузки, который входит в верхней части первой страницы и на pagechange он пытается вставить JS, специфичный для этой страницы в йоте
function insertScript(script, container) {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'Assets/Scripts/' + script + '.js';
container.appendChild(elem);
}
$(document).bind('pagechange', function(event){
//get the path to the html asset
var path = document.location.pathname;
//split up
var arr = path.split('/');
//get the relevant part of the path ie index.html
var page = arr[arr.length-1];
// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
var pages = $('div[data-role="page"]'),
// the current page is always the last div in the Array, so we store it in a variable
currentPage = pages[pages.length-1];
//if the page is index add index.js to the last dom node
if (page == 'index.html') {
insertScript('index', currentPage);
}
});
Тогда для пример index.js имеет следующее:
$("#start_page").live('pageinit', function() {
alert('on start page');
});
но функция pageinit никогда не срабатывает. Любые идеи
** редактировать:
У меня есть несколько страниц HTML, используя index.html и home.html, например
* index.html
<html>
<head>
<script type="text/javascript" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$("#index_page").live('pageinit', function() {
//do some page specific js functions for index.html
});
</head>
<body>
<div data-role="page" id="index_page">
<a href='home.html'>go to home page</a>
</div>
</body>
</html>
** home.html
<html>
<head>
<script type="text/javascript">
$("#home_page").live('pageinit', function() {
//this is the JS I want to pull
});
</head>
<body>
<div data-role="page" id="home_page">
<h1>this is the home page</h1>
</div>
</body>
</html>
Так что произойдет, когда я нажму на ссылку из индекса в дом, дом будет обновлен, но любой JS o n страница home.html НЕ будет вставлена на страницу через AJAX, поэтому я пытаюсь выяснить, как это сделать.
Я знаю, что я мог бы включить ВСЕ мои js на одной странице, но я действительно стараюсь избегать этого, потому что у меня много страниц, и это быстро станет беспорядочным.
Я добавил некоторую информацию к вопросу, чтобы лучше подобрать то, что я прошу. В основном, я хочу использовать javascript для конкретных страниц при навигации с помощью ajax – Brian