Onsen 2.0 - Hinzufügen eines Ereignis-Listeners zu Ons-Switch mit Javascript

Ich fürchte, mir fehlt etwas wirklich Einfaches, aber ich habe mehrere Versuche mit verschiedenen Fehlern versucht. Weiter zum Code:

<script>
        document.getElementById("optStats").on("change", function(e) {
    alert("Switch changed!");
  });
    </script>
<ons-switch modifier="list-item" id="optStats"></ons-switch>

So funktioniert das oben nicht. Es wird ein Fehler von @ erzeuUncaught TypeError: Cannot read property of on of null. Also nahm ich an, dass ich die Funktion zur Onload-Init-Funktion hinzufügen musste, aber sie schlug immer noch mit demselben Fehler fehl.

Ich habe alle hier aufgeführten Optionen ausprobiert:https: //onsen.io/guide/overview.html#EventHandlin ohne Erfolg. Dazu gehört die Verwendung von var anstelle von id und fast alles andere, von dem ich dachte, dass es funktionieren würde.

Edit: Vollständiger Code, der nicht funktioniert, aber in Codepen ohne Template-Tag funktioniert.

<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>

Ich verwende dies in ons.ready () und habe es außerhalb probiert, was zu demselben Fehler führt,cannot read property of addEventListener, wie oben für beide angegeben.

document.getElementById('optStats').addEventListener('change', function(e) {
      console.log('click', e.target.checked);
    });

Letztes Update Ich schwöre: ENDLICH !!!! Vielen Dank, dass Sie @ Fran-Dios!

Nachdem Sie damit gearbeitet haben, ist init nicht das Ereignis, das Sie verwenden möchten. Sie möchten auf jeden Fall show für das verwenden, was ich versucht habe.

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

Aus welchem Grund auch immer, wenn Sie init auf einem @ verwend<ons-tabbar> Wenn Sie die Tabulatortaste drücken, ändert sich der Status des Schalters. Bei Verwendung von show ist dies nicht der Fall. Wenn ich die Init-Aktion protokollierte, wurde die Seite außerdem noch zweimal als Init protokolliert, obwohl sie beim Start der App nicht angezeigt wurde. Show verursacht dies nicht. In jedem Fall ist der von @ fran-dios bereitgestellte Code die richtige Grundlage, um das zu erhalten, was ich brauchte, und seine Antwort ist immer noch richtig. Ich musste nur ein anderes Ereignis verwenden.