Why are multiple ajax requests triggered on a single form submission?

Question

Yii

Hello everyone, I have a modal in which I load data via ajax like this

$this->registerJs("
  $('#add_report').on('click', function() {
    $('#blockForLoadfunction').empty();
    $('#blockForLoadfunction').load('" . Url::to(['/project-group-report/load']) . "');
  });
");

modal has this code

Modal::begin([
    'options' => [
        'id' => 'kartik-modal',
        'tabindex' => false
    ]
]);
  Pjax::begin([
    'id'=> 'reportModelShow', 
    'enablePushState'=> false, 
    'timeout'=>5000
  ]); 
    <?php $form = ActiveForm::begin([
      'action' =>['/project-group-report/load'],
      'id' => 'reportModelShowForm',
      'options' => [
        'enctype' => 'multipart/form-data',
        'data-pjax' => true,
      ]
    ]); ?>
      //разные поля формы
    <?php ActiveForm::end(); ?>
  Pjax::end();
Modal::end();

$this->registerJs("
  $('#kartik-modal').modal('show');
  $('.btn-outline, .close').on('click', function() {
    $('#kartik-modal').modal('hide');
  });
");

almost everything works as it should.
I reload the page, click on the button, a modal pops up, fill in the data and click save, everything works as it should, debug shows 1 ajax worked. But if I close the modal I DO NOT RELOAD THE PAGE, but just close it and then open it again, fill out the form and press submit, then everything will work again, but instead of 1 ajax it will work 2 for one submission, if I continue to just close open the modal without reloading and submit the form, then the number of ajax requests for one submission will be the same as I closed / opened the modal.

Here is an example of one operation after closing / opening a modal window several times.

If you reload the page after each form submission, then it works fine.
Because of this, respectively, there are duplicates in the database, since several are triggered in one form submission.
It also needs to be said that if, for example, three requests worked at a time, then one of them will be normal, and all the others will have exactly the same parameters with only one difference in their headers, there will be such an entry - "Client closed connection before receiving the entire response".

I ask to help anyone who had a similar problem, I have been trying to solve it for several days, but nothing.

Answer 1

event.preventDefault();
 event.stopPropagation();

Answer 2

the number of ajax requests per submission will be the same as I closed/opened the modal

Typically, this behavior means that every time the button is clicked, you re-add the click handler. Keep in mind that on() does not replace the handler, but adds it, and when the button is clicked, all assigned handlers will be called.

Answer 3

The fact is that by initializing PJAX on the form, the form submit handler is hung, it is delegated, that is, through $ (document). on (...), therefore, with each load, handlers are hung again and again, you can see the code in the developer panel, in the server response usually at the very end there is a block