0

私は mvc 3 を使用して .net にプロジェクトを持っています。jquery モバイルを実装しようとしていますが、カスタム js に問題があります。これは _Layout.Mobile.cshtml のコードの一部です。

<body>
<div data-role="page" id="div_layout">
<div data-role="header">
    <a href="/" data-icon="home">Inicio</a>
    <h1>Title</h1>
</div>
<div data-role="content">
    @Html.Partial("_LogOnPartial")
    @RenderBody()
</div>
<div data-role="footer">
    <h4>Footer text</h4>
</div>
</div>

<script type="text/javascript">...</script>   
<script type="text/javascript" src= "@Url.Content("~/Content/js/utilities.js")">
</script>
</body>

結果のhtmlは（画像リンク）です：

http://i.imgur.com/1rQyx.png

_LogOnPartial 部分ビューは、utilities.js ファイルのいくつかの関数を使用します。問題は、この js ファイルが部分ビューの後にある必要があることです。そうでない場合は、ここまではすべて問題ありませんが、ボディ セクションでフォームを送信すると、すべてのdata-role="content" のコードが複製され、下部に配置されます。HTML の結果 (画像リンク) は次のとおりです。

http://i.imgur.com/inCEs.png

そのため、_LogOnPartial 部分ビューのコンテンツが機能しなくなり、構成ファイルに ajaxEnabled: true が含まれています。ajax を無効にすると、すべて正常に動作しますが、jq モバイル トランジションを使用したいのですが、ajaxEnabled: false で読み込みメッセージを表示できませんでした。 、誰かがこれを回避するのを助けることができますか? 前もって感謝します。

答えてくれてありがとう、_LogOnPartial部分ビューコードは

<div id = "loginbox">
    <div class="User">
        <label for="login_user">Usuario:</label>
        <input id="login_user" name="login_user" type="text" required id="basic" value="" data-mini="true" />
    </div>
    <div class="Password">
        <label for="login_password">Contraseña:</label>
        <input id="login_password" name="login_password" type="password" required id="basic" value="" data-mini="true" />
    </div>
    <div class="boton_login">
        <button type="submit" id="login" data-theme="a">Login</button>
    </div>
    <div id="login_error_message">
        <span id="login_error_message_desc"></span>
    </div>
</div>

utility.js の内容の一部は

$("#login").click(function () {
    alert('this never happens');
    //something
});

ページが初めてロードされたときは正常に動作しますが、その後動作を停止します (ajax がコンテンツを複製するとき)

4

2 に答える 2

0

これ以上のコードがなければ、解決策を言うのは困難です。utility.js は何をしますか? LogOnPartial には正確には何がありますか?

重複した data-role="content" で直面している問題は、jquery モバイルの DOM キャッシングが原因ですhttp://jquerymobile.com/test/docs/pages/page-cache.html Ajax を無効にすると、この機能は無効になりますこれが、問題が発生しなくなった理由です。

この回答を見ることができますHow does one disable Caching in jQuery Mobile UIは、非表示になっているページを削除する方法を示しています。

于 2012-07-30T20:40:24.420 に答える
0

問題はコンテンツが重複することではなく、新しいコンテンツがロードされた後にコールバックを登録していないことです。クリック ハンドラーは$('#login')最初のコンテンツが読み込まれたときに設定されましたが、新しいコンテンツ用にそのハンドラーを再設定する必要があります。

サブスクライブするイベントのイベント ドキュメントを確認してください: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

jQuery Mobile が行うことは、URL に対して AJAX 要求を行い、コンテンツを DOM に挿入することです。次に、その新しいコンテンツを接続する必要があります。

于 2012-07-31T02:45:04.000 に答える