Onsen 2.0-使用Javascript将事件侦听器添加到Ons-Switch [英] Onsen 2.0 - Adding event listener to Ons-Switch with Javascript
问题描述
我担心我错过了一些非常简单的东西，但是我尝试了多次尝试，但都出现了各种错误.转到代码:
I fear I am missing something really simple, but I have tried multiple attempts with various errors. On to the code:
<script>
document.getElementById("optStats").on("change", function(e) {
alert("Switch changed!");
});
</script>
<ons-switch modifier="list-item" id="optStats"></ons-switch>
因此上述方法不起作用.它生成错误Uncaught TypeError: Cannot read property of on of null.因此，我假设我需要将该函数添加到onload init函数中，但是它仍然失败，并出现相同的错误.
So the above does not work. It generates an error of Uncaught TypeError: Cannot read property of on of null. So I assumed that I needed to add the function to the onload init function but it still failed with the same error.
我尝试了此处列出的所有选项: https://onsen.io/guide/overview .html#EventHandling 失败.这将包括使用var代替id以及我认为可以使用的几乎所有其他功能.
I have tried all the options listed here: https://onsen.io/guide/overview.html#EventHandling without success. This would include using var instead of id and just about anything else listed that I thought would work.
完整的代码不起作用，但是可以在没有模板标签的codepen中工作.
Full code that is not working, but works in codepen without template tag.
<ons-template id="options.html" >
<ons-page>
<ons-toolbar>
<div class="center">Options</div>
</ons-toolbar>
<ons-list modifier="inset" style="margin-top:10px;">
<ons-list-item>
Detailed Stats
<ons-switch modifier="list-item" id="optStats"></ons-switch>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
我在ons.ready()中使用了此方法，并在外部尝试了该方法，导致出现相同的错误cannot read property of addEventListener，如上所列.
I am using this in ons.ready() and have tried it outside which results in the same error, cannot read property of addEventListener, as listed above for both.
document.getElementById('optStats').addEventListener('change', function(e) {
console.log('click', e.target.checked);
});
我发誓的最新消息: 最后！！！！谢谢@ Fran-dios！
Last Update I swear: FINALLY!!!! Thank you @Fran-dios!
使用此方法后，init并不是您要使用的事件，您肯定要使用show来完成我想做的事情.
After working with this, init is not the event you want to use, you definitely want to use show for what I was trying to do.
document.addEventListener("show", function(event){
if (event.target.id == "pgOptions") {
document.getElementById('optStats').addEventListener('change', function(e) {
localStorage.setItem('useDetailedStats', e.target.checked);
useDetailedStats = e.target.checked;
});
document.getElementById('optStats').setChecked(useDetailedStats);
}
},false);
无论出于何种原因，在<ons-tabbar>上使用init时，只要您按下选项卡，都将导致开关更改状态.通过使用显示，它不会.此外，当我记录初始化操作时，即使该页面未在应用启动时显示，也仍被记录为两次初始化.显示不会造成这种情况.无论哪种方式，@ fran-dios提供的代码都是获得我所需要的正确基础，而他的答案仍然是正确的，我只需要使用其他事件即可.
For whatever reason, when using init on a <ons-tabbar>, whenever you would press the tab, it would cause the switch to change states. By using show, it does not. Additionally, when I logged the init action, the page, even though it was not being shown on app startup, was still being logged as being init twice. Show does not cause this. Either way, the code that @fran-dios provided is the correct basis to get what I needed and his answer is still correct, I just needed to use a different event.
推荐答案
我担心你是对的.也许您想使用的是JS' addEventListener 比jQuery的上.其余的应该是正确的.
I fear you are right. Perhaps what you want to use is JS' addEventListener rather than jQuery's on. The rest should be correct.
更新:
超级简单的示例: http://codepen.io/frankdiox/pen/WrKjew
<ons-page>
<ons-switch id="mySwitch"></ons-switch>
</ons-page>
-----
document.getElementById('my-switch').addEventListener('change', function(e) {
console.log('click', e);
});
更新2:
真正的问题是关于在Onsen UI 2中初始化页面.最好的方法是使用页面生命周期事件，特别是init事件.
The real problem is about initializing pages in Onsen UI 2. The best way is using page life cycle events, specifically init event.
document.addEventListener("init", function(event) {
if (event.target.id == "my-page") {
document.getElementById("my-switch").addEventListener('change', function(e) {
console.log('click', e);
});
}
}, false);
这篇关于Onsen 2.0-使用Javascript将事件侦听器添加到Ons-Switch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
