jQuery Mobile 1.4.5-導航到動態創建的頁面時出錯

Question

我已經將頭撞在牆上幾個小時了，但似乎仍然無法正常工作。

我正在使用多頁模板（在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中，這會導致錯誤？ 我看過了，但是似乎沒有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"
});

上面的代碼產生錯誤。

Answer 1

我認為這個問題需要澄清：

這不是jQuery錯誤，這是jQuery Mobile錯誤。 問題中發布的錯誤消息是錯誤的，因為jquery.mobile.js庫已重命名為jquery.js 。
通過使用標准jquery.mobile-1.4.5.min.js ，錯誤消息為：

未捕獲的錯誤：語法錯誤，無法識別的表達式：jquery.mobile-1.4.5.min.js：3上的：nth-child

但請注意，如果使用自定義下載或使用調試版本，則行號可能會有所不同。
受影響的小部件：導航欄

此錯誤與動態頁面創建無關，因為它也出現在靜態頁面中。 可以使用以下標記輕松測試：

 <!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>

解決方案：導航欄<ul>中至少應有一個<li> <ul> 。

因為這個問題已經獲得了很多贊譽，所以以下是我用JQM動態創建HTML片段的兩分錢：

使用Plunker中的JQM 靜態頁面設計和測試最終的HTML代碼片段。
如果靜態模板有效 ，則將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(""); 
```
最后，僅使用一次append() 。

如果有人感興趣，很高興聽到一些有關HTML模板/片段創建不同方法的性能反饋。

除了注釋：

Omar很早以前已經回答了這篇文章標題中包含的問題： jquery mobile動態注入頁面

jQuery Mobile 1.4.5-導航到動態創建的頁面時出錯

問題描述

1 個解決方案

解決方案1
3 已采納 2017-07-16 07:46:03

jQuery Mobile 1.4.5-導航到動態創建的頁面時出錯

問題描述

1 個解決方案

解決方案1 3 已采納 2017-07-16 07:46:03

解決方案1
3 已采納 2017-07-16 07:46:03