引用Cordova/Onsen中模板化的HTML元素
这可能不是专门针对Cordova/Onsen的，但我对Javascript还不熟悉，所以我只是提供我认为相关的信息。我想知道引用模板HTML元素的正确方法是什么。下面是我目前正在做的事情(片段)：
HTML：
<ons-navigator title="myApp" var="myNavigator">
<ons-page id="mainPage">
<ons-toolbar>
<div class="center">Title</div>
</ons-toolbar>
<ons-list>
<ons-list-item id="button" modifier="chevron">
Button Text
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
<ons-template id="newPage.html">
<ons-page id="newPage">
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Page Title</div>
</ons-toolbar>
<button id="submit-btn" class="button button--large">Submit</button><br>
</ons-page>
</ons-template>Javascript：
(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' })
});
};
} )();本质上，我在等待Onsen在从模板页面抓取按钮之前向pageinit事件发出信号。页面加载后，即按下“按钮”时，就会发送pageinit信号。
尽管这是可行的，但感觉应该有一个更好的方法来做到这一点。在设置按钮处理程序和其他东西之前，不必等待加载页面，我似乎应该能够提前设置它们。但是，如果我试图在加载页面之前访问模板元素，它就无法工作( jQuery选择器返回null)。
我不会用角的。(大多数Onsen示例都是角的，但我目前正在学习足够多的新东西，并且不希望在这一点上再增加混乱。)
回答 1
Stack Overflow用户
发布于 2016-05-02 19:44:00
正如@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' })
});
});通常，我还建议使用页面的ids来创建类似于对象的东西。类似于：
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。)(即使这并不是非常推荐的，如果你想这样做的话，你仍然可以这样做。)
https://stackoverflow.com/questions/36972866
复制相似问题
腾讯云开发者
