Jquery сгенерировано с PHP повторяющимися событиями для ошибки

Question

Итак, у меня есть поисковая система "index. php", которая через скрипт JQuery ($ post) приносит набор форм. HTML и JQuery формы генерируются PHP в ответе $ post.

Каждый раз, когда я выполняю поиск по индексу. php события формы автоматически дублируются. Я перепробовал много вещей, но все еще не могу это исправить.

        index.php (JQuery Script:)

          $("[name='txtBuscar']").keyup(function(){

          $("[name='container']").html("<img src='/cargando.gif' class='img-fluid' style='display:block; margin-left:auto;margin-right:auto; margin-top:18%;'>");

          $.post("/form.php", 
            {

              txtBuscar:$("#txtBuscar").val()

            },
            function(data, status){

              $("[name='container']").html(data);

            });
          });

Другой файл:

form.php

<?php  echo '
<button name="caca" class="caca" type="button">Click Me!</button>     
<script>
      $(\'.container\').on(\'click\', \'.caca\', function (){        
        alert("caca ");        
      });
</script>';
?>

Сгенерированный HTML с дублированными событиями:

Answer 1

Когда вы загружаете ответ PHP, он выполняет этот скрипт и устанавливает новый обработчик, не удаляя предыдущий:

  $(\'.container\').on(\'click\', \'.caca\', function (){        
    alert("caca ");        
  });

Вы должны либо убедиться, что обработчик уже установлен, и, если это так, не переустанавливать снова (это делается, если обработчик всегда одинаков):

 if (!window.hasOwnProperty('handlerContainer')) {
     window.handlerContainer = true;
     $('.container').on('click', ...
 }

или каждый раз удалять старый обработчик и переустанавливать новый:

 $('.container').off('click', '.caca').on('click', '.caca', ...

In В общем, если это вообще возможно, никогда не запускает сценарии со страницы, загруженной с AJAX. Вы можете , но, по моему опыту, это вызывает несколько разных проблем. Вместо этого вы можете ссылаться на уже загруженные обратные вызовы:

 $.post('/some/url')
  .then(reply => {


      if (reply.call) {
          if (window.hasOwnProperty(reply.call)) {
              window[reply.call].apply(this, reply.arguments || null);
          }
      }
  }

и POST-ответом в этом случае будет JSON объект:

  print json_encode([
      'status'     => 'success',
      'call'       => 'someFunction',
      'arguments'  => [ 1, 2, "Hello" ]
  ]);

Я разработал простую библиотеку, которая позволяет мне передать, скажем, '@ window.somevariable' или '@ this.property.with.subproperty' или '$ (селектор)' из PHP и правильно декодировать его на стороне клиента. Вы можете сделать то же самое.