Php 将事件处理程序附加到在循环内创建的窗体

我有多个表单可以将数据发送到数据库。一个在循环内创建，一个在循环外创建。我使用AJAX将数据发送到数据库

在循环外的表单中，AJAX工作正常，将数据发送到数据库而不刷新页面。然而，在循环内的表单中，我只能发送一次数据。第二次刷新页面时

这是循环外的第一种形式：

<!-- main from for post data out the loop -->
<form id="PostFormData" method="post" enctype="multipart/form-data">
  <input type="file" name="image[]">
  <input type="text" name="Post">
  <button>done</button>
</form>

这是循环中的第二种形式

<!-- form inside the loop for comment data -->
<?php for ($i = 0; $i < 1000; $i++) { ?>
  <form id="CommentFormData" method="post" enctype="multipart/form-data">
    <input type="file" name="commentImage">
    <input type="text" name="commentValue">
    <button>done</button>
  </form>
<?php } ?>

---

在循环中生成的表单的问题是它们都具有相同的

id

。此值必须是唯一的。因此，事件处理程序只绑定到第一个事件处理程序，其他所有事件处理程序都不使用您提供的AJAX逻辑

要解决此问题，请在所有表单上使用公共

类

，包括PHP循环之外的表单。这样，页面中的所有表单都将使用相同的处理程序，JS将更加简洁。试试这个：

$（“表单注释表单数据”）.submit（函数（e）{
e、 预防默认值（）；
var formData=新formData（本）；
$.ajax({
url:'Post/sendcoment.php'，
键入：“POST”，
数据：formData，
成功：功能（数据）{
$（“#InsidePost”）.html（数据）；
},
cache:false，
contentType:false，
processData:false
});
});

完成

---

另外，我假设您只向DOM添加1000个

form

元素进行测试，因为这根本不是您应该做的事情。

您不能有多个具有相同ID的表单（或任何其他html元素）。JavaScript无法区分它们。它只会找到第一个。使用类代替主键我尝试代码，但问题未得到解决：(

<!-- form inside the loop for comment data -->
<?php for ($i = 0; $i < 1000; $i++) { ?>
  <form id="CommentFormData" method="post" enctype="multipart/form-data">
    <input type="file" name="commentImage">
    <input type="text" name="commentValue">
    <button>done</button>
  </form>
<?php } ?>

$("form#CommentFormData").submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this);

  $.ajax({
    url: 'Post/sendComment.php',
    type: 'POST',
    data: formData,
    success: function(data) {
      document.getElementById("InsidePost").innerHTML = data;
    },
    cache: false,
    contentType: false,
    processData: false
   });
 });