0

我无法弄清楚为什么我的 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'"/>

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

4

1 回答 1

0

jQuery mobile 默认使用 Ajax 加载页面。您已经到了pageinit那里，而不是document.ready正确的，但是您可以尝试：

  • 页面更改： http ://api.jquerymobile.com/pagechange/
  • 通过添加禁用链接上的 Ajax 加载data-ajax="false"

您的提交按钮执行您所期望的操作的原因是 javascript 实际上是在重新加载页面并刷新 DOM，而 Ajax 页面加载不会这样做。

于 2013-10-21T23:37:41.557 回答