Onsen 2.0 - добавление прослушивателя событий в Ons-Switch с помощью Javascript

Боюсь, мне не хватает чего-то очень простого, но я пробовал несколько попыток с разными ошибками. На код:

<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, но она все равно не удалась с той же ошибкой.

Я перепробовал все варианты, перечисленные здесь:https://onsen.io/guide/overview.html#EventHandling безуспешно. Это будет включать в себя использование var вместо id и всего, что я думаю, будет работать.

Изменить: Полный код, который не работает, но работает в коде без тега шаблона.

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

Последнее обновление клянусь: НАКОНЕЦ !!!! Спасибо @ Фран-Диос!

После работы с этим 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>всякий раз, когда вы нажимаете на вкладку, это приводит к переключению состояния переключателя. С помощью шоу это не так. Кроме того, когда я регистрировал действие init, страница, даже если она не отображалась при запуске приложения, все равно дважды регистрировалась как init. Шоу не вызывает этого. В любом случае, код, предоставленный @ fran-dios, является правильной основой для получения того, что мне нужно, и его ответ по-прежнему правильный, мне просто нужно было использовать другое событие.

Ответы на вопрос(1)

Ваш ответ на вопрос