Каков правильный способ инициализации объектов на мобильной странице jquery? docs говорят, что использовать "pageInit()" без примеров этой функции, но привести примеры привязки к методу "pageinit" (разница в заметке), Однако на этой простой тестовой странице я вообще не вижу, чтобы событие срабатывало:
<html>
<body>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<div data-role="page" id="myPage">
test
</div>
<script>
$("#myPage").live('pageinit',function() {
alert("This never happens");
});
</script>
</body>
</html>
Что мне не хватает? Я должен добавить, что если вы меняете pageinit на другое событие, например pagecreate, этот код работает.
---- UPDATE ----
Он начал работать, когда я ввел script в страницу div:
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
Используется jQuery Mobile 1.0RC1
.live() устарел, рекомендуется использовать .on() в jQuery 1.7+:
<script type="text/javascript">
$(document).on('pageinit', '#indexPage', function(){
// code
});
</script>
Обратитесь к онлайн-документу за дополнительной информацией о .on(): http://api.jquery.com/on/
Оказывается, это ошибка в 1.0b3, которая исправлена в текущей голове. Итак, если вы хотите исправить сейчас, вам нужно взять последнюю версию git. Или подождите следующего релиза.
jQuery(document).live('pageinit',function(event){
centerHeaderDiv();
updateOrientation();
settingsMenu.init();
menu();
hideMenuPopupOnBodyClick();
})
Теперь это работает. Теперь все переходы на страницы и все функции JQM AJAX будут работать вместе с вашими определенными функциями javascript! Наслаждайтесь!
pageinit не будет срабатывать, если он находится на вторичных страницах (НЕ ГЛАВНАЯ страница), если он написан общим <script> тег...
У меня такая проблема - на вторичных страницах, которые не загружаются с помощью 'rel= "external", код в общем <script> тег никогда не выполняется...
действительно этот код всегда выполняется...
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
если вы создали "интерфейс с вкладками", лучше использовать "pagehow"
Мне пришлось поместить script в раздел HTML-страницы, который для меня является ошибкой. Он загружается обычно в браузере (а не через AJAX) и все на одной странице, включая javascript. Мы не должны использовать документ в готовом виде.
Самый простой способ, с которым я столкнулся, это использовать JQM + Steal. Он работает как шарм, пока вы кладете:
<script type='text/javascript' src='../steal/steal.js?mypage'></script>
Внутри data-role='page' div.
Затем используйте AJAX для подключения всего, что может использовать тот же mypage.js, и используйте внешнюю ссылку (с помощью тега rel="external") во все, что требует другой страницы кражи.
@Wojciech Bańcer
Из документов jQuery:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Попробуйте следующее:
$('div.page').live('pageinit', function(e) {
console.log("Event Fired");
});
$(document).on("pageinit", "#myPage", function(event) {
alert("This page was just enhanced by jQuery Mobile!");
});
События не запускаются на начальной странице, только на страницах, которые вы загружаете через Ajax. В приведенном выше случае вы можете просто:
<script>
$(document).ready(function() {
alert("This happens");
});
</script>