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 - 导航到动态创建页面时出错

回答

相关问题