jQuery Mobile 1.4.5 - 导航到动态创建的页面时出错

Question

我已经用头撞墙几个小时了，但似乎仍然无法正常工作。

我正在制作一个 Web 应用程序，使用多页面模板（我的 index.html 中有多个页面。

Objective:动态创建一个新页面，然后在屏幕上显示这个页面。

问题： 创建页面并尝试更改到此页面后，出现以下错误：Error: Syntax error, unrecognized expression: :nth-child in 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"
});

以上代码产生错误。

Answer 1

我认为这个问题需要澄清：

这不是 jQuery 错误，这是 jQuery 移动 错误。这问题中的错误信息 posted 是错误的，因为 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>

解决方法：导航栏<ul>.

<li>

因为这个问题得到了很多赞成票，这里是我关于使用 JQM 动态创建 HTML 片段的两分钱：

使用 JQM static 设计并测试最终生成的 HTML 片段页，在Plunker.
如果静态模板有效，则将 HTML 部分放在一起。 ID 喜欢使用简单的文本连接，但这只是一个问题个人编程风格和偏好（不要太接受这个认真地） - 至少，如果你正在处理一个大模板，标签嵌套会立即清晰。
```
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 template/fragment 创建的不同方法的性能的一些反馈。

注意事项：

这个 post 标题中的问题已经被 Omar 很久以前回答了： jquery mobile Dynamically Injecting Pages

jQuery Mobile 1.4.5 - 导航到动态创建的页面时出错

jQuery Mobile 1.4.5 - error on navigating to dynamically created page

javascript

jquery-mobile