Jquery Mobile pagecontainershow 事件未在模拟器中触发，但在设备上？

Question

我有两个事件侦听器 pagecontainerbeforeshow 和 pagecontainershow，但只有在代码部署到我的 Android 设备（Nexus 6P 和旧版 Nexus S）时才会触发。当我在 Android Emulator (Nougat) 中启动代码时，代码不会触发，也没有错误消息。

MWE 代码 sn-p:

$(':mobile-pagecontainer').on('pagecontainerbeforeshow', function(event, ui) {
    console.log('I AM HERE');
});
$(':mobile-pagecontainer').on('pagecontainershow', function(event, ui) {
    console.log('I AM HERE 2');
});

奇怪的是，我在项目的其他地方（但仍然从同一个 DOM 加载）有其他相同的代码（用于其他模块化需求），这很好。在内部，其他代码使用开关来区分特定页面 (switch (ui.toPage.attr('id')) {)，除了事件触发回调的内容外，它仍然相同。

我不明白为什么在部署到设备时一切正常，包括非常旧的设备，例如 Nexus S，但在部署到模拟器时却不能。

它不会损坏。 pagecontainershow 和 pagecontainerbeforeshow 根本不会被触发。

可能是原始页面显示事件正在消耗事件吗？

有什么想法吗？

注意事项：

• jquery 手机版：jquery.mobile-1.5.0-alpha.1.min.js

Answer 1

想通了 - 感谢解封器。

tl;dr：在 DOM 就绪事件之后添加事件侦听器 - 在我的例子中，检查 DOM 就绪和 Cordova 设备就绪。

$(function() { // DOM Ready
  document.addEventListener("deviceready", onDeviceReady, false);
});

// Cordova device ready
function onDeviceReady() {
  $(':mobile-pagecontainer').on('pagecontainerbeforeshow', function(event, ui) {
    // This now works correctly
  }
}

---

原因

在我的例子中，我错误地解释了Cordova deviceready event，它说“但是，JavaScript 只在 DOM 加载后加载”。我读到这意味着收听deviceready 事件将隐含地意味着 DOM 也准备好了 - 事实并非如此。

---

以前的解决方法

将 Jquery 选择器更改为 document:

$(document).on('pagecontainerbeforeshow', function (event, ui) {
    console.log('I AM WORKING 1');
});
$(document).on('pagecontainershow', function(event, ui) {
    console.log('I AM WORKING 2');
});

现在，所有事件都会在我的设备和 Android 模拟器中触发。

这是可行的，因为文档在 DOM 的其余部分准备好之前可用。