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 モバイルはデフォルトで Ajax を使用してページを読み込みます。pageinitどちらが正しいのではなく、そこにいますdocument.readyが、試すことができます：

送信ボタンが期待どおりに動作する理由は、JavaScript が文字通りページをリロードし、DOM を更新しているためです。これは、Ajax ページの読み込みでは行われません。

于 2013-10-21T23:37:41.557 に答える