JQuery 手机不工作

Question

我正在尝试运行 jQuery 移动设备上的其中一个演示。但是，当我复制并粘贴源代码时（虽然我用 Google CDN 替换了链接）它无法正常工作。在控制台中，它显示："Uncaught TypeError: Cannot read property 'concat' of [here it says a few line numbers in jQuery Mobile] undefined"。这是我的代码：

    <!DOCTYPE html>
<html>
<head>
    <title>Ben Gubler</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>

  <div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page" data-url="panel-responsive-page1">
      <div data-role="header">
          <h1>Panel responsive</h1>
          <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
          <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
      </div><!-- /header -->
      <div role="main" class="ui-content jqm-content jqm-fullwidth">
          <h1>Panel responsive</h1>
          <p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.</p>
          <div data-demo-html="#panel-responsive-page1"></div><!--/demo-html -->
          <br>
          <br>
          <br>
          <br>
          <br>
          <a href="../" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">Back</a>
      </div><!-- /content -->
      <div data-role="panel" data-display="push" data-theme="b" id="nav-panel">
          <ul data-role="listview">
              <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                  <li><a href="#panel-responsive-page2">Accordion</a></li>
                  <li><a href="#panel-responsive-page2">Ajax Navigation</a></li>
                  <li><a href="#panel-responsive-page2">Autocomplete</a></li>
                  <li><a href="#panel-responsive-page2">Buttons</a></li>
                  <li><a href="#panel-responsive-page2">Checkboxes</a></li>
                  <li><a href="#panel-responsive-page2">Collapsibles</a></li>
                  <li><a href="#panel-responsive-page2">Controlgroup</a></li>
                  <li><a href="#panel-responsive-page2">Dialogs</a></li>
                  <li><a href="#panel-responsive-page2">Fixed toolbars</a></li>
                  <li><a href="#panel-responsive-page2">Flip switch toggle</a></li>
                  <li><a href="#panel-responsive-page2">Footer toolbar</a></li>
                  <li><a href="#panel-responsive-page2">Form elements</a></li>
                  <li><a href="#panel-responsive-page2">Grids</a></li>
                  <li><a href="#panel-responsive-page2">Header toolbar</a></li>
                  <li><a href="#panel-responsive-page2">Icons</a></li>
                  <li><a href="#panel-responsive-page2">Links</a></li>
                  <li><a href="#panel-responsive-page2">Listviews</a></li>
                  <li><a href="#panel-responsive-page2">Loader overlay</a></li>
                  <li><a href="#panel-responsive-page2">Navbar</a></li>
                  <li><a href="#panel-responsive-page2">Navbar, persistent</a></li>
                  <li><a href="#panel-responsive-page2">Pages</a></li>
                  <li><a href="#panel-responsive-page2">New</a></li>
                  <li><a href="#panel-responsive-page2">Popup</a></li>
                  <li><a href="#panel-responsive-page2">Radio buttons</a></li>
                  <li><a href="#panel-responsive-page2">Select</a></li>
                  <li><a href="#panel-responsive-page2">Slider, single</a></li>
                  <li><a href="#panel-responsive-page2">New</a></li>
                  <li><a href="#panel-responsive-page2">New</a></li>
                  <li><a href="#panel-responsive-page2">New</a></li>
                  <li><a href="#panel-responsive-page2">Text inputs & textarea</a></li>
                  <li><a href="#panel-responsive-page2">Transitions</a></li>
          </ul>
      </div><!-- /panel -->
      <div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">
          <form class="userform">
              <h2>Login</h2>
              <label for="name">Username:</label>
              <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
              <label for="password">Password:</label>
              <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
              <div class="ui-grid-a">
                  <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
                  <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
              </div>
          </form>
      </div><!-- /panel -->
  </div>
</body>
</html>

非常感谢！我认为问题出在链接中……也许使用 Google CDN 有问题？早些时候，当我下载 jQuery 用于他们网站的相同源文件时，它工作正常。

Answer 1

看起来 jQuery Mobile 可能与 jQuery Core 3 不兼容。当您降级到 2.2.4.

版本时页面可以正常工作

使用它代替您的第一个 jQuery 导入。

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

更多信息：

Answer 2

如果上面关于 'not be compatible with jQuery Core 3' 的答案不起作用，请尝试将以下内容添加到您的样式中，它对我有用：

@media (max-width: 1400px) {
  html, body {
    overflow: scroll;
  }
}

JQuery 手机不工作

JQuery Mobile Not Working

javascript

jquery

jquery-mobile