jquery navbar throws Uncaught Error: Syntax error, unrecognized expression: :nth-child

Question

当您首先在锚点加载页面然后导航回包含导航栏的主页（在 html 文件中找到的第一个页面）时，会发生此错误。

锚定页面（刷新锚定页面上的浏览器）：

manager.html?accountId=5#page-device-settings

使用 link 返回主页。

a href="#page-dashboard"

主页

manager.html?accountId=5

包含取自 (https://api.jquerymobile.com/tabs/)

的导航栏示例

<div data-role="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#fragment-1" class="ui-btn-active">One</a></li>
      <li><a href="#fragment-2">Two</a></li>
      <li><a href="#fragment-3">Three</a></li>
    </ul>
  </div>
  <div id="fragment-1">
    <p>This is the content of the tab 'One', with the id fragment-1.</p>
  </div>
  <div id="fragment-2">
    <p>This is the content of the tab 'Two', with the id fragment-2.</p>
  </div>
  <div id="fragment-3">
    <p>This is the content of the tab 'Three', with the id fragment-3.</p>
  </div>
</div>

在 chrome 调试器中你可以看到抛出这个错误。

Uncaught Error: Syntax error, unrecognized expression: :nth-child
at Function.db.error (jquery-2.1.0.min.js?_=1516664627221:2)
at Object.CHILD (jquery-2.1.0.min.js?_=1516664627221:2)
at ob (jquery-2.1.0.min.js?_=1516664627221:2)
at xb (jquery-2.1.0.min.js?_=1516664627221:2)
at Function.db (jquery-2.1.0.min.js?_=1516664627221:2)
at Function.a.find (jquery.mobile-1.4.5.js:1367)
at Function.a.find.matches (jquery.mobile-1.4.5.js:643)
at Function.o.filter (jquery-2.1.0.min.js?_=1516664627221:2)
at x (jquery-2.1.0.min.js?_=1516664627221:2)
at o.fn.init.filter (jquery-2.1.0.min.js?_=1516664627221:2)

版本：

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

有人知道为什么会发生这种情况以及如何解决它吗？

我不确定这是否重要，但有趣的是，使用 Chrome 中的 Spy 插件，我可以看到以下请求触发了两次。在锚定页面的初始加载期间一次，然后在我导航回主页时再次加载。这只会在导航主页 -> 锚定页面 -> 主页时出现一次。

Method: Get    Type: html    URL: manager.html

Answer 1

所以我删除了所有代码，并能够使用这个基本示例获得预期的功能；因此，问题一定在我这边。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dashboard</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head> 
<body> 


<!-- DASHBOARD -->
<div data-role="page" id="page-dashboard">

    <div data-role="header">
    </div><!-- /header -->

    <div data-role="content">

        <div data-role="tabs" id="tabs">
      <div data-role="navbar">
        <ul>
          <li><a href="#fragment-1" class="ui-btn-active">One</a></li>
          <li><a href="#fragment-2">Two</a></li>
          <li><a href="#fragment-3">Three</a></li>
        </ul>
      </div>
      <div id="fragment-1">
        <p>This is the content of the tab 'One', with the id fragment-1.</p>
      </div>
      <div id="fragment-2">
        <p>This is the content of the tab 'Two', with the id fragment-2.</p>
      </div>
      <div id="fragment-3">
        <p>This is the content of the tab 'Three', with the id fragment-3.</p>
      </div>
    </div>
    </div><!-- /content -->

</div><!-- /page -->
<!-- END DASHBOARD -->

<!-- DEVICES -->
<div data-role="page" id="page-device-settings">

    <div data-role="header">
        <h1>Device Settings</h1>
        <a href="#page-dashboard" id="pds-done" class="ui-btn-right" data-icon="check" data-inset="true" data-direction="reverse" data-transition="slidefade">Done</a>
    </div><!-- /header -->

    <div data-role="content">
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

<script>
    var current_index = $("#tabs").tabs().tabs("option","active");
    $("#tabs").tabs('load',current_index);
</script>

注意 1：我手动输入 link 以从锚定页面开始：

manager.html?accountId=5#page-device-settings

注意2：需要脚本代码来刷新主动选择的选项卡，否则所有选项卡将立即显示。

注3：Get请求只调用了一次

Method: Get    Type: html    URL: manager.html

SOLUTION EDIT: My code was fixed by adding the following block in the scripts section.

var current_index = $("#tabs").tabs().tabs("option","active"); $("#tabs").tabs('load',current_index);

This also prevented the page from performing that 2nd GET html request. Maybe someone can provide more details on what is going on there.

jquery navbar throws Uncaught Error: Syntax error, unrecognized expression: :nth-child

jquery navbar throws Uncaught Error: Syntax error, unrecognized expression: :nth-child

exception

navbar

jquery-mobile

jquery-mobile-navbar