2

少し前に JqueryMobile を使い始めましたが、ウェブサイトをモバイル デバイスに適応させようとしています。

私は ASP.NET Mvc を使用しており、ページの構造は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquerymobile")
    @Scripts.Render("~/bundles/jqueryflexslider")
</head>

<body>
    <div data-role="page" data-theme="a">
        @RenderBody()
    </div>
</body>
</html>

問題は、レイアウト ページ内に、メニューをアニメーション化する単純な jquery 関数を含む部分ビューがあることです。クリックするとスライドアップ/ダウンします。ページを再ロードすると正常に動作しますが、戻るボタンを押すと単純に機能しなくなりますが、もう一度更新を押すと機能します。

「頭の中のスクリプトとスタイル」に関するjqueryモバイルのドキュメントを読んだところ、

..ナビゲーション システムのデフォルトの動作は、そのリンクの href を使用して Ajax リクエストを作成することです (ページ全体の読み込みでその href を要求するブラウザーのデフォルトのリンク動作を許可するのではなく)。その Ajax リクエストが送信されると、フレームワークはテキスト コンテンツ全体を受け取りますが、レスポンスの body 要素 (より具体的には data-role="page" 要素が提供されている場合) のコンテンツのみを挿入します。

私の質問は、コンテンツをリロードしてスクリプトを機能させる方法です (問題はリロードの問題であると仮定します)。

4

1 に答える 1

2

私はついにそれを働かせました！

私の問題は、ページからページに移動するたびに、<div id="page" data-role="page">重複していたことです。DOM で 2 つのページを取得し、同じメニューの 2 つの IDS を取得したため、単純なクリックが機能しなくなりました。別のページへのリダイレクトを担当したリンクに data-ajax='false' を追加すると、ページは通常どおりリロードされ、最終的に重複した div、IDS がなくなり、すべてが問題なく実行されるようになりました。

特に指定しない限り、JQuery Mobile は AJAX ナビゲーションを使用します。ASP.NET リダイレクトは通常のリクエストには問題ありませんが、AJAX では問題が発生します。したがって、私の答えは AJAX をオフにすることです。そのためには、属性 data-ajax='false' をタグに追加するだけです。

私の場合、簡単な解決策は (各 Html.ActionLink/Url.Action の変更には時間がかかるため)、これを _Layout.cshtml の最後 (「body」タグを閉じる直前) に追加することです。

 $(document).on('pageinit', function() {
      $('a').each(function() {
      $(this).attr("data-ajax", "false");
     });
  });

jQuery モバイルでリンク付きの Ajax も使用したくない場合は、これで問題ありません。ほとんどの状況で Ajax を使用できるようにしておきたいので、問題が発生する可能性がある場合にのみ、Ajax を無効にしています。

于 2013-07-02T19:30:51.313 に答える