为什么我的 jQuery 移动代码不起作用？

Question

我不确定如何在我的移动设备上进行任何 jQuery 移动事件，例如点击或触摸启动。当我运行它在桌面上时，一切正常。使用 PhoneGap 构建 apk。

根据 jQuery 移动文档，代码应该可以在移动设备上运行。也尝试在移动设备上对其进行调试，似乎 jquery 甚至无法加载...

* {
  margin: 0;
  padding: 0
}

body {
  background-color: red;
}

h1 {
  position: absolute;
  right: 30px;
  padding: 30px;
  color: white;
  text-shadow: none;
}

#hello {
  z-index: 3;
  background-color: #222222;
}

#hello > div {
  height: 200px;
  width: 200px;
  background-color: green;
}

.ui-page { background:transparent; }

.ui-input-text {
  border: none;
}


<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="jquery-mobile/jquery.mobile-1.4.5.min.css" />
    <script  type="text/javascript" src="jquery-mobile/jquery-3.2.1.min.js">
    <script type="text/javascript" src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
   </script>

    <title>Hello World</title>
</head>

<body>
    <div class="app" data-role='page'>
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>



    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>


    <script type="text/javascript">
      $(document).ready(function() {
        $('h1').bind("tap", function() {
          $(this).css({color: 'red'});

        });
      });

      /* works
      $(document).ready(function() {
        $('h1').on("click", function() {
          $(this).css({color: 'red'});

        });
      });
    </script>
</body>

</html>

Answer 1

在 Cordova 或 PhoneGap 应用程序中使用 jQuery，您将在您要发布的应用程序的 www 目录中拥有它，然后像这样包含它，例如：

<script type="text/javascript" src="js/jquery.min.js"></script>

而不是来自 cdn，或像这样的远程地址：https://code.jquery.com

为什么我的 jQuery 移动代码不起作用？

Why doesn't my jQuery Mobile code work?

jquery

jquery-mobile

cordova