Боюсь, я упускаю что-то очень простое, но я пробовал несколько попыток с разными ошибками. К коду:
<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. Поэтому я предположил, что мне нужно добавить функцию в функцию инициализации загрузки, но она все равно не удалась с той же ошибкой.
Я пробовал все варианты, перечисленные здесь: https://onsen.io/guide/overview.html#EventHandling безуспешно. Это будет включать использование var вместо id и почти все остальное, что, по моему мнению, будет работать.
Изменить: полный код, который не работает, но работает в codepen без тега шаблона.
<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, как указано выше для обоих.
document.getElementById('optStats').addEventListener('change', function(e) {
console.log('click', e.target.checked);
});
Последнее обновление Клянусь: НАКОНЕЦ-ТО!!!! Спасибо, @Fran-dios!
После работы с этим init — это не то событие, которое вы хотите использовать, вы определенно хотите использовать show для того, что я пытался сделать.
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);
По какой-то причине при использовании init на <ons-tabbar> всякий раз, когда вы нажимали вкладку, это приводило к изменению состояния переключателя. При использовании show это не так. Кроме того, когда я регистрировал действие инициализации, страница, даже если она не отображалась при запуске приложения, все равно дважды регистрировалась как инициализирующая. Шоу не вызывает этого. В любом случае код, предоставленный @fran-dios, является правильной основой для получения того, что мне нужно, и его ответ по-прежнему правильный, мне просто нужно было использовать другое событие.
