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

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;
});