为什么单击时我的方法在 Framework7 中被调用两次?

Why is my method called twice in Framework7 on click?

我正在使用 Framework7,我正在尝试做一个相当简单的按钮点击设置来触发警报 window。设置如下:

<div class="col-100">
  <div class="list no-hairlines-md">
    <ul>
      <li class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Custom Message</div>
          <div class="item-input-wrap">
            <input id="custom-message-input" type="text" placeholder="Your message here..." />
            <span id="custom-message-clear" class="input-clear-button"></span>
          </div>
        </div>
      </li>
    </ul>
    <a id="custom-message-button" class="button button-raised button-fill">Send Custom Message</a>
  </div>
</div>

点击事件初始化如下:

app.on('pageInit', function (page) {
  $('#custom-message-button').on('click', () => {
    $('#custom-message-clear').click();
    app.dialog.alert('Message was successfully sent.', 'Information');
  });
  ...

但是由于某些原因,当我点击按钮时,它触发了两次。警报出现一次,我点击它消失,然后它再次出现,我点击它消失。然后它就消失了。

我可能在这里遗漏了什么?

如果以后有人偶然发现了这个;这是因为在路由器中找到的每个页面都会调用“pageInit”。使用“名称”属性 找出当前正在初始化的页面。