Question

过去几天我一直试图让jQuery在PhoneGap的Hello World模板中运行，但没有运气。我似乎无法让jQuery工作。

在下面的示例中，我添加了一个默认Hello World代码的按钮，我希望每次单击时都显示一个警告。 HTML是：

<html>
<head>
  *<!-- different metas and link to css -->*

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript"> app.initialize(); </script>
  <title>Hello World</title>
</head>
<body>

<div class="app">
    <h1>PhoneGap</h1>
    <div id = "deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
        <br>
        <button class = "event clkhere"> Click here </button>
    </div>
</div>

</body>
</html>

js / index.js文件是：

var app = {

initialize: function() {
    this.bindEvents();
},
bindEvents: function() {
    document.addEventListener("deviceready", this.onDeviceReady,false);         
},
onDeviceReady: function() {
    app.receivedEvent('deviceready');
},
receivedEvent: function(id)  {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    var receivedButton = parentElement.querySelector('.clkhere');
    receivedButton.setAttribute('style', 'background-color: #008CBA;');

    $(".clkhere").click(function() {
            alert("button clicked") ;
    });

    alert("reached this far");

    console.log('Received Event: ' + id);
}
};

上面，与默认PhoneGap JS相比的差异是a）我的按钮在设备准备时变为蓝色，b）jQuery代码，以及c）jQuery代码之后的另一个警报，看它是否被触发。在这里，第一个警报被触发，但按钮点击不起作用，第二个警报不会被触发。

我已尝试过多个关于$（document）.ready placement的建议，甚至尝试重新排列index.html中的脚本顺序，但似乎没有任何效果。

任何想法都会非常感激。感谢

Answer 1

我相信你需要在document.addEventListener（“deviceready”）周围添加jquery的$（）。ready（），这样你的onDeviceReady（）就不会触发，直到两者 jQuery和Cordova都有完成装载。

deviceready事件与其他事件不同，因为如果事件已经“完成”，则设置侦听器将立即触发回调。在jQuery的$（）。ready（）函数中设置deviceready事件监听器将确保Cordova和DOM / jQuery都为您的代码做好准备。

jQuery + PhoneGap v7.1.1不起作用

1 个答案: