Framework7 2 alert(); on Ajax-Form-Submit Event

Question

I would like to use form script on framework7 app. I have my form on a page displayed by route.js I have my javascript action on route.js

When I click on button, the alert is displayed two times, I don't know why.

Here is my 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));
  });

},

},
},

Here is my 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>

Thank you for your help,

Answer 1

Check if pageInit fired twice for some reasons

or try

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