Мобильный переход JQuery на странице загрузки

Question

Мобильный переход JQuery на странице загрузки

0

Я не могу понять, почему мой мобильный код jquery не работает при перезагрузке страницы с помощью jQuery mobile link/button.

Пример кода:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

  <div id="mydiv">wtf</div>

    <div data-role="content">
        <p>Hello world</p>
    </div><!-- /content -->

    <a href='page.html?reload=1' data-role="button" data-theme="a">Again</a>

</div><!-- /page -->


<script type="text/javascript">

function setmydiv()
{
   console.log('start');
   $("#mydiv").html('init');
}

$(document).on('pageinit', function(){
   console.log('init');
   setmydiv();

});
</script>

</body>
</html>

Загрузка страницы (первый раз) и отображение "init" в области mydiv. Когда я нажимаю "Снова", текст mydiv по-прежнему "wtf" (не заменяется "init")

Журнал консоли:

[00:49:16,081] GET http://www.vetgirig.nu/page.html [HTTP/1.1 200 OK 52ms]
[00:49:16,686] "init"
[00:49:16,686] "start"
--
[00:49:34,498] GET http://www.vetgirig.nu/page.html?reload=1 [HTTP/1.1 200 OK 46ms]
[00:49:34,387] "init"
[00:49:34,388] "start"

Я пытался использовать другие события, кроме pageinit, но без успеха...

Если я заменю:

<a href='page.html?reload=1' data-role="button" data-theme="a">Again</a>

с:

<input type='submit' data-role="button" value='Again' onClick="location.href = 'page.html?reload=1'"/>

Тогда все работает нормально (но переход - нажатие кнопки анимации - теряется).
Что мне не хватает...?

user2904980 22 окт. 2013, в 01:21

Источник

Теги:

jquery

transition

jquery-mobile

1 ответ

Ещё вопросы

Robbie Averill · Answer 1 · 2013-10-21T20-47-00.000Z

jQuery mobile использует Ajax для загрузки страниц по умолчанию. У вас там есть pageinit а не document.ready которая правильна, но вы можете попробовать:

pagechange: http://api.jquerymobile.com/pagechange/
отключив нагрузку Ajax на вашу ссылку, добавив data-ajax="false"

Причина, по которой ваша кнопка отправки делает то, что вы ожидаете, заключается в том, что javascript буквально перезагружает страницу и обновляет DOM, которую загружает страница Ajax, не делает.

Удивительно. Это работает. Большое спасибо.
Просто мысль: что я действительно хотел бы, так это иметь возможность манипулировать DOM после завершения ajax. Разве это не возможно, звучит как основная вещь для меня ?!