表单提交多次，尽管它被阻止

Question

这是我的脚本：

$("#search").on("click", function () {
  $("#search_tutor").submit(function () {
      data = $(this).serialize() + "&" + $.param(data);
      $.ajax({
          type: "POST",
          dataType: "json",
          url: "fetch_tutor.php",
          data: data,
          success: function (data) {
              alert(data);
          }
      });
      return false;
  });
});

我面临的问题是：

当我第一次单击$("#search") 时，alert(data); 出现一次。当我第二次单击$("#search") 时，alert(data); 出现两次。当我单击以下时间时会发生这种情况。根据我点击$("#search") 的次数，alert(data); 出现了很多次。据我了解，这表明$("#search_tutor")被多次提交。这是因为我在ajax函数之后使用了return false来防止页面重新加载。但是当我刷新页面时alert(data);只出现一次。 我试过了：

1) 删除 return false 但它会重新加载我不希望发生的页面，因为它没有将我收到的表单 ajax 调用结果附加到指定的 div。

这没有任何改变。
2)

 $("#search_tutor").submit(function(event){
                event.preventDefault();

这不允许在单击按钮后发生任何事情。
3)

$("#search").on("click",function(event){
    event.preventDefault();

我能想到的唯一解决方案是，在每次 ajax 调用后重新加载页面，但需要将 ajax 的结果附加到指定的 div 中。但是，请问我该怎么做呢？

Answer 1

问题是您在单击处理程序中注册了提交处理程序，因此在每次单击按钮时都会注册一个新的提交处理程序。

所以第二次点击按钮会调用两次提交处理程序，发送两次ajax请求。

无需使用点击处理程序，只需使用提交事件即可

$("#search_tutor").submit(function() {

  var data = $(this).serialize() + "&" + $.param(data);

  $.ajax({
    type: "POST",
    dataType: "json",
    url: "fetch_tutor.php",
    data: data,
    success: function(data) {
      alert(data);
    }
  });
  return false;
});