时间戳

首页 > 解决方案 > 使用 PHP 重复事件生成的 Jquery 错误

php - 使用 PHP 重复事件生成的 Jquery 错误

问题描述

综上所述，我有一个搜索引擎“index.php”，它通过一个JQuery 脚本（$post）带来了一组表单。表单的 HTML 和 JQuery 由 PHP 在 $ post 响应中生成。

每次我在 index.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：

标签： phpjqueryhtmlajax

解决方案

当您加载 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', ...

一般来说，如果可能的话，永远不要从从 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" ]
  ]);

我开发了一个简单的库，它允许我从 PHP 传递，例如，'@window.somevariable' 或 '@this.property.with.subproperty' 或 '$(selector)'，并对其进行正确解码的客户端。你也可以这样做。

推荐阅读