Ajax Form Submit in Framework7 - does not work as in the documentation, what's wrong?

Question

JavaScript

I'm trying to create an ajax form as described in: framework7.io/docs/form-ajax-submit.html , namely:

<form id="feedback-form" class="ajax-submit" action="http://mysite/mFeedBack" method="POST">
<div class="content-block-title">Форма обратной связи</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-name"></i></div>
        <div class="item-inner">
          <div class="item-title label"><label for="FeedBackForm_name" class="required">Имя <span class="required">*</span></label></div>
          <div class="item-input"> 
            <input name="FeedBackForm[name]" id="FeedBackForm_name" type="text">          </div>
        </div>
      </div>
    </li>
    .....
    .....
    .....
</div>
<div class="content-block">
    <input class="button active" type="submit" name="yt0" value="Отправить сообщение"></div>
</form>

In JavaScript I have the following:

$$('form.ajax-submit').on('submitted', function (e) {
  myApp.alert('Here goes alert text');
  var xhr = e.detail.xhr;
  var data = e.detail.data;
});

As a result, the AJAX request after pressing the submit button Send message goes to the server, but the JavaScript code is not executed . Whether it exists or not, it doesn't work.

What am I doing wrong? It's all according to the instructions...

Answer 1

The problem was that I registered the submitted event in the general listing of JacaScript, but when my form was loaded by reference as a view, I had to use the event registration in another event: onPageInit:

var myApp = new Framework7({
    modalTitle: 'MyApp',
    onPageInit: function (app, page) {
       if (page.name === 'site_feedback') {
            $$('form.ajax-submit').on('submitted', function (e) {
              var xhr = e.detail.xhr;
              var data = e.detail.data; 
              myApp.alert(data);
            });
        }
    }
});