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

Question

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

这意味着搜索段是一个表单，在成功完成搜索(使用 AJAX)后，每个搜索结果将显示为包含另一个表单的卡片，其中包含单个出价字段。

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

这是我的 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

您将事件监听器绑定(bind)到不存在的元素(因为您在搜索后稍后加载表单):

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

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

您可以在添加元素后(即每次搜索后)添加和删除事件监听器。

更好的方法是将事件监听器绑定(bind)到父元素。

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

在这里，您将事件监听器绑定(bind)到确实存在的#card-container。