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 时，无论何时按下制表符，都会导致开关改变状态。通过使用显示，它不会。此外，当我记录 init 操作时，即使在应用程序启动时没有显示该页面，它仍然被记录为 init 两次。显示不会导致这种情况。无论哪种方式，@fran-dios 提供的代码都是获得我需要的正确基础，他的答案仍然正确，我只需要使用不同的事件。

Answer 1

我担心你是对的。也许你想要使用的是 JS 的 addEventListener 而不是 jQuery 的 on。其余的应该是正确的。

更新：

超级简单的例子：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);