Framework7 2 alert（）; 在Ajax-Form-Submit事件上

Question

我想在framework7应用程序上使用表单脚本。 我在route.js显示的页面上有表单，在route.js上有javascript操作

当我单击按钮时，警报会显示两次，我不知道为什么。

这是我的Route.js：

{
path: '/contact_catalogue/',
url: './pages_pro/contact_catalogue.html',
on: {
pageInit: function (e, page) {

 $$('.convert-form-to-data').on('click', function(){
    var formData = app.form.convertToData('#my-form');
    alert(JSON.stringify(formData));
  });

},

},
},

这是我的contact_catalogue.html：

<div class="page" data-name="contact_catalogue">
<form class="list form-store-data" id="my-form" name="my-form" autocomplete="off">
<ul>
<li>
  <div class="item-content item-input">
    <div class="item-inner">
      <div class="item-title item-label">Mr/Mme</div>
      <div class="item-input-wrap">
        <select name="gender">
          <option value="male" selected>Mr</option>
          <option value="female">Mme</option>
        </select>
      </div>
    </div>
  </div>
 </li>
 <li>
  <div class="item-content item-input">
    <div class="item-inner">
      <div class="item-title item-label">Nom</div>
      <div class="item-input-wrap">
        <input type="text" name="name" placeholder="Votre nom" autocomplete="off">
      </div>
    </div>
  </div>
 </li>
 <li>
  <div class="item-content item-input">
    <div class="item-inner">
      <div class="item-title item-label">E-mail</div>
      <div class="item-input-wrap">
        <input type="email" name="email" placeholder="E-mail" autocomplete="off">
      </div>
    </div>
  </div>
</li>
<li>
  <div class="item-content">
    <div class="item-inner">
      <div class="item-title">Demande de catalogue</div>
      <div class="item-after">
        <label class="toggle">
          <input type="checkbox" name="switch" value="yes" id="switch" selected><i class="toggle-icon"></i>
        </label>
      </div>
    </div>
  </div>
</li>
</ul>
</form>
<div class="block block-strong row no-margin">
<div class="col-25"></div>
<div class="col"><a class="button convert-form-to-data" id="test" href="#">Envoyer</a></div>
<div class="col-25"></div>
</div>

谢谢您的帮助，

Answer 1

检查pageInit是否由于某些原因被触发了两次

或尝试

pageInit: function (e, page) {
  $(page.$el).on('click', '.convert-form-to-dat', function(){
    // do stuff
  })
},