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

Question

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

MWE 代码片段：

$(':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

想通了 - 感谢 deblocker。

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 的其余部分准备就绪之前可用。

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

Jquery Mobile pagecontainershow event not firing in emulator, but is on device?

javascript

android-emulator

jquery-mobile

jquery-events

原因

以前的解决方法