javascript - Onsen 2.0 - 使用 Javascript 向 Ons-Switch 添加事件监听器

Question

我担心我错过了一些非常简单的东西，但我已经尝试了多次尝试并出现了各种错误。关于代码:

<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 函数，但它仍然失败并出现相同的错误。

我已经尝试了此处列出的所有选项: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);

无论出于何种原因，在 <ons-tabbar> 上使用 init 时，无论何时按下选项卡，都会导致开关改变状态。通过使用 show，它不会。此外，当我记录 init 操作时，该页面即使未在应用程序启动时显示，仍被记录为两次 init 。显示不会导致此。无论哪种方式，@fran-dios 提供的代码都是获得我需要的东西的正确基础，他的回答仍然是正确的，我只需要使用不同的事件。

Answer 1

我想你是对的。也许你想用的是JS' addEventListener而不是 jQuery 的 on .其余的应该是正确的。

更新:

super 简单的例子: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 中初始化页面。最好的方法是使用 page life cycle事件，特别是 init 事件。

document.addEventListener("init", function(event) {
  if (event.target.id == "my-page") {
    document.getElementById("my-switch").addEventListener('change', function(e) {
      console.log('click', e);
    });
  }
}, false);