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 rather than jQuery's 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);
});

更新二：

真正的问题是关于在 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);

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

Onsen 2.0 - Adding event listener to Ons-Switch with Javascript

javascript

onsen-ui

monaca