Jquery移动初学者

Question

我有一个小的网络应用程序，我想转换为使用jquery移动。但是，尽管我认为我有所有的初学者文档，但我有一些问题下面的页面仍然显示“本机”选择下拉框，据我所知，任何人可以快速发现问题。

<!doctype html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/[version]/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.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">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>Hello world</p>
        <div class="ui-field-contain">
            <label for="select-custom-1">Basic:</label>
            <select name="select-custom-1" id="select-custom-1" data-native-menu="false">
                <option value="1">The 1st Option</option>
                <option value="2">The 2nd Option</option>
                <option value="3">The 3rd Option</option>
                <option value="4">The 4th Option</option>
            </select>
        </div>
    </div>
    <div data-role="footer">
        <h4>My Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

Answer 1

这里有两个问题。首先，URL中的[version]应该是您正在使用的jQuery移动实例的实际版本字符串；在本例中为1.4.5。

其次，移动端3.x不支持jQuery jQuery。您需要使用较旧的版本，例如1.12.1：

​

<!doctype HTML>
<html>
<head>
  <title>My Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.12.1.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">
    <div data-role="header">
      <h1>My Title</h1>
    </div>
    <div role="main" class="ui-content">
      <p>Hello world</p>
      <div class="ui-field-contain">
        <label for="select-custom-1">Basic:</label>
        <select name="select-custom-1" id="select-custom-1" data-native-menu="false">
          <option value="1">The 1st Option</option>
          <option value="2">The 2nd Option</option>
          <option value="3">The 3rd Option</option>
          <option value="4">The 4th Option</option>
        </select>
      </div>
    </div>
    <div data-role="footer">
      <h4>My Footer</h4>
    </div>
  </div>
</body>
</html>

​