单个HTML页面上表单提交的问题

Question

我在一个HTML页面中有几个表单，主要思想是这些表单提交彼此独立，并使用AJAX来防止整页重新加载。

这意味着搜索细分是一种形式，在搜索成功完成后（使用AJAX），每个搜索结果都会显示为一张卡片，其中包含另一个带有单个投标字段的表单。

奇怪的是，即使我尝试使用与搜索相同的技术进行加价，每次提交出价时页面都会刷新，并且请求会成为网址的一部分：

这是我的HTML：

  <!-- Card display: cards are generated dynamically -->
  <div id="card-container">
  </div>

以下是我对这种特殊形式的JavaScript（和JQuery）：

var bidReq;

$("#add-bid").submit(function(event) {
  event.preventDefault();

  console.log("entered form");

  if (bidReq) {
    bidReq.abort();
  }
  $form = $("this");

  // Serialize data in the form
  var serialized = $("form").serialize();

  // Fire off the request to php/add_bid.php
  bidReq = $.post (
    "php/add_bid.php",
    serialized,
    disableAddBidButtons
  );
});

function disableAddBidButtons(response) {
    console.log("bye");
}

我怀疑这可能是因为$_POST是一个全局变量，目前仍然存储各张卡的信息，但我对此并不十分肯定。完整的HTML，CSS和JavaScript可以在这里找到：https://codepen.io/anon/pen/RLXPaM

我还在HTML文件中包含了动态生成的卡的HTML说明。

我读到在一个HTML页面中有多个表单并不是一个好的做法，所以如果你有更好的想法，请告诉我！

提前感谢您的帮助！

Answer 1

您将事件侦听器绑定到不存在的元素（因为您在搜索后加载表单）：

$("#add-bid").submit(function(event) {

此处，#add-bid表单不存在。

您可以在添加元素后添加和删除事件侦听器，因此在每次搜索后都可以。

更好的方法是将事件侦听器绑定到父元素。

$("#card-container").on('submit', '#add-bid', function(event)

在这里，您将事件侦听器绑定到#card-container，它确实存在。