Question

我无法弄清楚为什么我的jquery移动代码在通过jquery移动链接/按钮重新加载页面时不起作用。

示例代码：

<!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>

页面加载（第一次）并在mydiv区域中显示“init”。当我按下“再次”时，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'"/>

然后一切正常（但过渡 - 按下按钮动画 - 丢失了）我错过了什么......？

Answer 1

jQuery mobile默认使用Ajax加载页面。您有pageinit而不是document.ready这是正确的，但您可以尝试：

pagechange：http://api.jquerymobile.com/pagechange/
通过添加data-ajax="false"

你的提交按钮正在做你期望的原因是javascript实际上正在重新加载页面并刷新DOM，Ajax页面加载不会这样做。

加载页面上的JQuery移动转换

1 个答案: