javascript - 後継 - 動的に作成されたページへの移動時の jQuery モバイル 1.4.5 エラー



jquery topage (1)

私は今数時間壁に頭を打っていますが、まだこれを働かせるようには見えません。

私は、複数ページのテンプレート( index.html複数のページを持つ)を使用して、Webアプリケーションを作成しています。

目的:動的に新しいページを作成し、このページを画面に表示します。

問題:ページを作成してこのページに変更しようとすると、次のエラーが表示されます。 Error: Syntax error, unrecognized expression: :nth-child jquery.mobile-1.4.5.js:1850:8 Error: Syntax error, unrecognized expression: :nth-child

関連コードは次のとおりです。

JavaScript

// Add the page to the DOM                
$.mobile.pageContainer.append(page);

// Change the page
$.mobile.pageContainer.pagecontainer('change', $('#' + pageId));

HTML

ページが作成されて<body>追加されたため、HTML部分は省略します。

私はページがエラーを与えるpagecontainerに登録されていないかもしれないと思いますか? 私は見ましたが、ページャの更新方法がないようです。

どのようにこれを修正するための任意のアイデア?

編集1:

上記のコードを使用して別のページに移動すると、たとえばホームページが正常に動作します。 動作しないページは、新しく作成されたページだけです。

編集2:

私が作成したページがエラーを生成するようです。 ページに移動するために使用されたコードが正しく機能しました。

私がページを作成するために使用するコード:

var page = $('<div/>', {
        id: pageId,
        'data-role': 'page',
        'data-dom-cache': 'false',
    });
var content = $('<div/>', {
        'data-role': 'content',
    });
var courseTabs = $('<div/>', {
        'data-role': 'tabs',
    });
var courseNavbar = $('<div/>', {
        'data-role': 'navbar',
    }).append($('<ul/>'));
var courseBtn = $('<a/>', {
        href: '#',
        class: 'ui-btn',
        text: 'testbutton',
    });

// Glue the page parts together in the page.
courseTabs.append(courseNavbar);
content.append(courseTabs).append(courseBtn);
page.append(content);

// Add the page to the DOM
$.mobile.pageContainer.append(page);

// Navigate to the page
$.mobile.pageContainer.pagecontainer("change", page, {
    transition: "flip"
});

上記のコードはエラーを生成します。

https://src-bin.com


Answer #1

私は、この問題を明確にする必要があると考えています。

  • これはjQueryエラーではなく、これはjQuery Mobileエラーです。 jquery.mobile.jsライブラリの名前がjquery.js変更されたため、質問に投稿されたエラーメッセージは間違っています。

    標準のjquery.mobile-1.4.5.min.jsを使用すると、エラーメッセージは次のようになります。

    未知のエラー:構文エラー、認識できない式:: nth-child at jquery.mobile-1.4.5.min.js:3

    カスタムダウンロードが使用されている場合や、デバッグバージョンが使用されている場合は、回線番号が異なる可能性があります。

  • 影響を受けるウィジェット: Navbar
  • このエラーは、静的なページでも発生するため、動的ページの作成とはあまり関係がありません。 これは以下のマークアップで簡単にテストできます:

    <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
      <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
      <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
      <div data-role="page" id="page1">
        <div data-role="navbar">
          <ul>
          <!-- no <li> here -->
          </ul>
        </div>
        <div data-role="content">
        </div>
      </div>
    </body>
    </html>
  • 解決策:Navbar <ul>内に少なくとも1つ<li>なければなりません。

この質問には多くのアップフォースが寄せられていますので、ここではJQMを使ったHTML作品の動的作成に関する2つのセントがあります:

  1. PlunkerのJQM 静的ページを使用して、最終的に生成されるHTMLスニペットを設計してテストします。
  2. 静的テンプレートが機能する場合は 、HTML部分をまとめて配置します。 私は単純なテキスト連結を使用したいと思いますが、これは個人的なプログラミングスタイルと好みの問題です(これをあまり重視しないでください)。 - 少なくとも、大きなテンプレートを扱っている場合、タグのネストはすぐに明らかです。

    var html = [
        '<div data-role="navbar">',
            '<ul>',
                '<li><a href="'+link1+'" class="ui-btn-active">'+text1+'</a></li>',
                '<li><a href="'+link2+'">'+text2+'</a></li>',
            '</ul>',
        '</div>'
    ].join("");
  3. 最後に、 append() 1回だけ使用してください。

誰かが興味を持っているなら、HTMLテンプレート/フラグメント作成のためのさまざまなメソッドのパフォーマンスに関するフィードバックを聞いてうれしいです。

メモは別として:

この記事のタイトルに含まれている質問は、長い間前にOmarによってすでに回答されています。jquery mobile動的に注入するページ





jquery-mobile