Когда jQM загружает другую страницу через AJAX, он загружает только что-нибудь внутри вашего div [data-role = "page"] и ничего больше, например, голову
Так что вы можете, если хотите, включить любой JS / CSS в этот div, проблема в том, что если к этой странице обращаются многократно, любой CSS будет накапливаться, но проблема для JS намного хуже.
По сути, вы добавляете каждую страницу в DOM, поэтому JS запускается на всем DOM (на каждой загруженной вами странице), если вы используете глобальный селектор, такой как $ ('div.someClass'), даже если используется идентификатор isn ' Это идеальное решение, потому что, если вы можете ссылаться на одну и ту же страницу дважды.
Для небольших сайтов
Я решил эту проблему, переместив весь CSS в один файл, и для кода JS, который я хочу запускать при каждой загрузке страницы, я связываюсь с событиями jQM pageinit и pageshow:
<script type="text/javascript">
$("div:jqmData(role='page'):last").bind('pageinit', function(){
//your code here - $.mobile.activePage not declared
});
$("div:jqmData(role='page'):last").bind('pageshow', function(){
//your code here - $.mobile.activePage works now
});
</script>
Событие pageinit запускается, когда страница загружается, только один раз (после загрузки она остается в памяти, если вы вернетесь к ней, даже с помощью кнопки «назад», которая больше не запускается), с другой стороны, запускается pagehow. каждый раз, когда страница отображается, даже если вы вернетесь к ней с помощью кнопки «Назад» в браузере, например.
Pageinit запускается при наличии DOM, событие pagehow происходит только в том случае, если у вас есть код, который зависит от отображаемого DOM, и вам нужна быстрая ссылка на активную страницу через $ .mobile.activePage или если некоторые данные были изменены и Вы должны обновлять это каждый раз, когда это показано. В большинстве случаев я использую Pageinit только в качестве документа. Уже для jQM и связываю там свои события. Используйте bind для статических элементов и на вместо live для динамических элементов, потому что живые события слушают в корне документа, вы хотите слушать на странице div.
Для крупных сайтов
Для больших сайтов есть преимущества привязки живого события к любым страницам и обработки типов страниц, таким образом, код js загружается не более одного раза.
Если у вас есть внешние js-файлы с функциями say helper, которые вам нужны только один раз, поместите это в заголовок всех своих страниц (если их не слишком много), если у вас очень большой сайт, вы, вероятно, могли бы добиться большего успеха, если бы отслеживание, какие JS-файлы были загружены на стороне сервера.
Всего этого можно избежать, просто не используя AJAX для загрузки новых страниц, поэтому подумайте, стоит ли этот эффект перехода / загрузки
* Вот как я работаю с большими сайтами jQM: *
- привязывает прямое событие ко всем страницам / диалогам pageinit и событиям pagehow:
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
- Я ссылаюсь на каждую страницу с именем:
<div data-role="page" data-mypage="employeelist">
В этом прямом эфире вы можете в основном иметь оператор switch для каждого «имени» страницы, а затем проверить event.type для pageinit / pageshow или обоих, и поместить туда свой код, затем каждый Когда страница создается / показывается, это событие будет запущено, оно знает, какая страница вызвало его, а затем вызывает соответствующий код
В итоге у меня было слишком много кода, поэтому я построил объект-обработчик, в котором js каждой страницы включается в отдельный файл js и может регистрировать обработчики с помощью события live
Недостатком является то, что все ваши js для всего сайта загружаются на первую страницу, которую достигает пользователь, но минимизированный даже большой сайт меньше, чем jQuery или jQM, так что это не должно вызывать беспокойства. Преимущество в том, что вы больше не загружаете все свои JS для каждой страницы через AJAX каждый раз, когда пользователь переходит на новую страницу.
* примечание: теперь RequireJS может сделать это еще более управляемым