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

我幾個小時都撞到了牆上，現在依然無法使它工作。jQuery Mobile 1.4.5 - 導航到動態創建頁面時出錯

我正在做一個Web應用程序，使用多頁面模板（有我index.html多頁

目的：。動態地創建一個新的頁面，然後在屏幕上顯示此頁

問題：創建頁面，並試圖改變這一頁，我得到以下錯誤後：Error: Syntax error, unrecognized expression: :nth-child在jquery.mobile-1.4.5.js:1850:8

相關的代碼可以在下面找到：

的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" 
});

以上代碼生成錯誤。

來源

2017-07-06 JiFus

你試過'.pagecontainer（「變」，頁） ;'你在使用jQuery 3.x嗎？你可以添加一個動態頁面的例子嗎？ – Omar

@Omar請注意，pagecontainer函數適用於webapp初始化後的其他頁面。我使用的jQuery包含在jQuery Mobile的下載包中。它可以像這樣找到：'jquerymobile.com>下載最新的>提取文件'。在提取的地圖中：jquery.mobile-1.4.5> demos> js> jquery.mobile-1.4.5.js'。我儘管重命名了文件（到'jquery.js'）。 – JiFus

索引內有多少頁？你是否瀏覽索引文件以外的其他文件？ – Omar

我相信這個問題需要澄清：

這不是一個jQuery的錯誤，這是一個jQuery Mobile的錯誤。該問題中發佈的錯誤消息是錯誤的，因爲 jquery.mobile.js庫已重命名爲jquery.js。

使用標準jquery.mobile-1.4.5.min.js錯誤消息是：

Uncaught Error: Syntax error, unrecognized expression: :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>

解決方案：至少一個<li>應的導航欄<ul>內部。

因爲這個問題已經得到了許多upvotes，這裏是我對動態創建HTML一塊與JQM的兩分錢：

設計，並通過使用測試最終生成的HTML代碼段JQM static page，in Plunker。
如果靜態模板的工作原理是，那麼將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 Dynamically Injecting Pages

來源

2017-07-16 07:46:03 deblocker

謝謝你的回答！爲了清楚起見，我更新了問題標題+ jquery移動文件 – JiFus

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

回答

相關問題