2015-05-26 6 views
0

Я новичок в jquery mobile.

Мне нужна помощь в понимании эквивалента document.ready() для jquery mobile.

У меня 2 страниц JSP следующим образом:

Page1.jsp

<head> 
<script type="text/javascript"> 
$(document).on('pagebeforeshow', '#page1', function(event){ 
    alert("page 1"); 
}); 
</script> 
</head> 
<body> 
<div data-role="page" id="page1"> 
    <header data-role="header"> 
    </header> 
    <article data-role="content"> 
    page 1 
    </article> 
    <footer data-role="footer" data-position="fixed"> 
    <nav data-role="navbar"> 
    <ul> 
     <li><a href="page2.jsp>" data-icon="arrow-r">Page 2</a></li> 
    </ul> 
</div> 
</body> 

Page2.jsp

<head> 
<script type="text/javascript"> 
$(document).on('pagebeforeshow', '#page2', function(event){ 
    alert("page 2"); 
}); 
</script> 
</head> 
<body> 
<div data-role="page" id="page2"> 
    <header data-role="header"> 
    </header> 
    <article data-role="content"> 
    page 2 
    </article> 
    <footer data-role="footer" data-position="fixed"> 
    <nav data-role="navbar"> 
    <ul> 
     <li><a href="page1.jsp>" data-icon="arrow-l">Page 1</a></li> 
    </ul> 
</div> 
</body> 

Так что, когда я сначала загрузить страницу 1, я получаю предупреждение " Страница 1". Но когда я перейти к странице 2, я не получаю предупреждение «Страница 2»

Но на странице 2, я вернуться обратно на страницу 1, я получаю предупреждение «страница 1»

Так почему дон» t Я получаю предупреждение «страница 2» при загрузке страницы 2 с помощью навигации?

Я пытаюсь научиться jquery mobile, поэтому, пожалуйста, объясните, и любой пример кода поможет мне понять это много.

Я попытался прочитать документацию по мобильному телефону jquery, но не понял его.

Спасибо!

+0

Куда вы загрузите jQuery на этих страницах? –

+0

Я загружаю их в разделе страницы jsp –

+0

Я понял это. Благодаря! –

ответ

0

Ваш скрипт не работает, потому что он технически не загружается. jQuery Mobile следует ссылкам, перехватывая их нормальную функциональность (для перехода на новую страницу) и вместо этого загружает содержимое страницы с помощью запроса AJAX. В случае успеха он берет элемент [data-role = page] и добавляет его на существующую страницу. В результате загружается новая страница, но вы никогда не действительно оставьте страницу, с которой вы начали.

Все, что не входит в элемент [data-type = page], не загружается во время этого, включая ваши скрипты. Вы можете исправить это, перемещая тэг <script> внутри элемента [data-role = page] страницы2. Если вы это сделаете, имейте в виду, что любой загруженный код будет сохранен по мере загрузки других страниц, и у вас могут возникнуть проблемы с тем, что вы никогда не планировали.

Другой вариант - просто заставить jQuery Mobile фактически перейти к новым страницам при нажатии ссылок. Обратитесь к their documentation за то, как это сделать.

Смежные вопросы