.live("pageshow"..) 在 Phonegap JQuery Mobile 上不起作用答案

【问题标题】：.live("pageshow"..) not working on Phonegap JQuery Mobile.live("pageshow"..) 在 Phonegap JQuery Mobile 上不起作用
【发布时间】：2013-08-12 21:55:55
【问题描述】：

我有以下使用 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)');
});

【问题讨论】：

我试过了，事件被触发了..你确定你没有遗漏什么吗？

标签： cordova jquery-mobile

【解决方案1】：

您应该使用以下内容

$(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!");
    });
}

希望这会有所帮助，迈克

【讨论】：

我的应用程序由三个 html 文件和相应的 javascript 文件构成。所以我正在听设备准备好。然而，这是在 index.js 中完成的，我的起始页的 javascript 文件。当我在那里添加 $(document).delegate 时，它会被调用。但是我不喜欢这样的事实，即我需要在 index.js 中注册侦听器，即使其余逻辑在 details.js 中。在这里使用什么是正确的范例？
嗯，您需要为所有底层页面使用一个通用包装器，因为 jQM 将所有页面加载到 DOM 中。它是这样发生的： - 首先 jQuery 将您的 index.html 加载到 DOM - 如果用户更改页面，它会将所有内容加载到 DOM 中，但只有
标签之间的元素，这导致您的 javascript not 功能。另一个选项是添加 rel="external" 但这会清除 DOM 并重新加载整个页面。希望这会有所帮助，问候
谢谢 NDakotaBE :) 这个解释帮助我理解了问题所在。我将移动到
中，现在它在页面加载时加载。我来自 obj-c 背景，查询手机对我来说是新事物。这解决了我一直有的很多问题。
请注意，在页面 div 中添加 script 标签实际上并不正确。很高兴我能帮上忙
也感谢您提供此信息。如果这是使用 jquery mobile 的正确方法，将使用一般包装方法。