Question

这可能不是特定于Cordova / Onsen，但我是Javascript的新手所以我只是提供我认为相关的信息。我想知道引用模板化HTML元素的正确方法是什么。这就是我目前正在做的事情（片段）：

HTML：

(function () {
"use strict";

/* Event Registration */
document.addEventListener('deviceready', onDeviceReady.bind(this), false);

// Listening for pageinit event to grab submit button.
document.addEventListener("pageinit", function (event) {
    console.log("init Fired!");
    if (event.target.id == "newPage") {
        initPage();
    }
}, false);

function initPage() {
    $('#submit-btn').on('click', doSomethingUseful);
}

function onDeviceReady() {
    // Handle the Cordova pause and resume events
    document.addEventListener( 'pause', onPause.bind( this ), false );
    document.addEventListener('resume', onResume.bind(this), false);

    // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
    $('#button').on('click', function () {
        myNavigator.pushPage('newPage.html', { animation: 'slide' })
    });
};
} )();

使用Javascript：

[[[ 1  2]
  [ 3  4]]

 [[ 5  6]
  [ 7  8]]

 [[ 9 10]
  [11 12]]

 [[13 14]
  [15 16]]]

基本上，我正在等待Onsen在从模板化页面抓取按钮之前发出pageinit事件的信号。一旦页面加载，即当按下“按钮”时，就会发送pageinit信号。

即使这样可行，但感觉应该有更好的方法来做到这一点。在设置按钮处理程序和其他东西之前，不必等待页面加载，似乎我应该能够提前设置它们。但是，如果我在加载页面之前尝试访问模板化元素，则它不起作用（jQuery选择器返回null）。

仅供参考，我没有使用Angular。（大多数温泉的例子都是在Angular中，但我现在正在学习新的东西，并且不想在此时再添加一些混淆。）

Answer 1

正如@Munsterlander所提到的 - 你不能将事件附加到尚未添加到DOM的元素。目前你正在做的事情被认为是最好的做事方式。所以我建议尝试简化现有代码，而不是实际改变它的一般想法。例如：内联一些函数并使用ons.ready代替deviceready。此代码的相同且更简单的版本可以是：

document.addEventListener("pageinit", function (event) {
    console.log("init Fired!");
    if (event.target.id == "newPage") {
        $('#submit-btn').on('click', doSomethingUseful);
    }
});

ons.ready(function () {
    document.addEventListener( 'pause', onPause.bind( this ), false );
    document.addEventListener('resume', onResume.bind(this), false);

    // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
    $('#button').on('click', function () {
        myNavigator.pushPage('newPage.html', { animation: 'slide' })
    });
});

通常我也会建议使用页面的ID来制作类似对象的东西。类似的东西：

var handlers = {
    newPage: function(e) { $('#submit-btn').click(doSomethingUseful); },
    page2: function(e) { $('#submit-btn2').click(doSomethingUseful2); }
};

和

document.addEventListener('pageinit', function(e) {
    if (handlers.hasOwnProperty(e.target.id)) {
      handlers[e.target.id](e);
    }
});

我想现在是你想要的真正答案的时候了。由于您在将元素添加到DOM之前无法收听元素，因此如果您希望您能够以与pageinit事件相同的方式收听事件并过滤目标。使用jQuery有一种相对简单的方法：

$(document).on(eventName, selector, handler);

所以你可以随时做到这一点

$(document).on('click', '#submit-btn', doSomethingUseful);

它会起作用，因为它将处理程序附加到文档而不是元素。因此，这将适用于您将来添加到DOM的所有#submit-btn。 :)（即使你不想这样做，如果你想要你仍然可以做到这一点。）

在Cordova / Onsen中引用模板化HTML元素

1 个答案: