logo标签列表

Phonegap JQuery Mobile中的.live（“ pageshow”..）无法工作

cordovajquery-mobile
5
我有以下代码，使用JQuery Mobile。这里的重点是我想要在“pageshow”事件触发时执行一些代码。
在Chrome上，下面的所有代码都可以正常运行。我能看到控制台日志。然而，当我将其作为Phonegap应用程序的一部分运行时，我从未收到“pageshow”事件的触发。
我已经调查了一段时间，但没有成功。希望有人能给我解释一下为什么我的事件丢失了，以及在Phonegap上让这段代码工作所需的步骤是什么。 details.html 
<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">      </script>
        <link rel="stylesheet" href="css/index.css" />
        <!-- cordova -->
        <script src="cordova-2.2.0.js"></script>
</head>
<body>
    <div data-role="page" id="details_page">
      <a href="places.html" data-transition="slide" data-direction="reverse">Back</a>
      <h3>Hi I am second page</h3>
    </div>

    <script src="js/details.js"></script>

</body>
</html>

details.js

$("#details_page").live("pageshow", function() {
    console.log('I am alive! (details.html)');
});
我尝试了，事件已经被触发了..你确定你没有漏掉什么吗？ - andrea.marangoni
3个回答
6
您应该使用以下内容：
$(document).delegate("#details_page", "pageshow", function() {
    console.log("Hello world!");
});

请注意，只有在deviceready事件被触发后才能运行代码。
因此，使用设备就绪事件的方式如下：
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    $(document).delegate("#details_page", "pageshow", function() {
        console.log("Hello world!");
    });
}

希望这能帮到你，Mike。
我的应用程序由三个HTML文件和相应的JavaScript文件构成。因此，我正在监听设备准备就绪。但是这是在index.js中完成的，这是我的起始页面的javascript文件。当我在那里添加$(document).delegate时，它会被调用。然而，我不喜欢这种方式，因为即使其余逻辑在details.js中，我仍需要在index.js中注册侦听器。在这里使用什么样的范例才是正确的？ - mraty
好的，您需要使用一个通用的包装器来处理所有底层页面，因为jQM会将所有页面加载到DOM中。 它的工作方式如下：
  • 首先，jQuery将您的index.html加载到DOM中
  • 如果用户更改页面，则会将所有内容加载到DOM中，但仅在<div data-role="page">标记之间的元素，这会导致您的JavaScript不起作用。 另一个选项是添加rel="external"，但这会清除DOM并重新加载整个页面。 希望这可以帮助您， 问候
 - NDakotaBE
谢谢NDakotaBE :) 这个解释帮助我理解了问题所在。我把<script src="js/details.js" />移动到<div data-role="page">里面，现在页面加载时它会被加载。我来自obj-c背景，query mobile是新的东西。这解决了我一直以来的很多疑问。 - mraty
请注意，在页面div中添加脚本标签并不正确。很高兴我能帮到你。 - NDakotaBE
谢谢这个信息。如果使用jQuery Mobile的通用包装器方法是正确的方法，那么我会采用这种方法。 - mraty
3

也许你已经解决了这个问题，但对于像我一样遇到困难的人来说，这是我找到的解决方法。 在JQuery 1.7中，live()已被弃用，并且自1.9版本以后已被删除。 请改用on()。 我已将我的（例如）代码行更改为：

$('#detailsPage').live('pageshow', function(event) {

to:

$(document).on('pageshow', '#detailsPage', function(event) {

您好，rash*：

0

我认为问题可能是您在页面显示后调用JS。

如果这是问题，您只需要放置

<script src="js/details.js"></script>

在 head 或者 "page" div 前面。
谢谢提议。我尝试了这个，但似乎在Phonegap上没有改变。 - mraty
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接