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

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

HTML:

本质上，我在等待Onsen发出pageinit事件的信号，然后再从模板页面抓取按钮。页面加载后，即按下“按钮”时，发送pageinit信号

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

---

仅供参考，我没有使用角度传感器。（大多数Onsen示例都是角度的，但我现在已经学到了足够多的新东西，我不想让其他东西在这一点上增加混乱。）

正如@Munsterlander所提到的那样-您不能将事件附加到尚未添加到DOM的元素上。目前，你所做的被认为是最好的做事方式。所以我建议尽量简化现有的代码，而不改变它的总体思想。例如：内联调用某些函数并使用

ons.ready

而不是

devicerady

。此代码的同等和更简单版本可以是：

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); }
};

及

我想现在是你想要的真正答案的时候了。由于在将元素添加到DOM之前无法侦听元素，因此如果需要，可以侦听事件并过滤其目标，方法与处理

pageinit

事件相同。使用jQuery有一种相对简单的方法：

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

所以你可以随时这样做

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

---

它将工作，因为它将处理程序附加到文档而不是元素。因此，这将适用于将来添加到DOM中的所有

#提交btn

。）（即使这不是很推荐，如果你愿意，你仍然可以这样做。）

正如你所说，这正是它应该如何工作的。不能向尚未附加到DOM的对象添加事件。这是所有web浏览器的限制。记住，混合应用只不过是cordova包装的单页网站。谢谢。至少我没有偏离正轨。我肯定会结合您创建一种页面ID查找表的想法。

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

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

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