JavaScript动态创建#testform表单后jQuery Ajax提交失效解决方法

你遇到的绑定失效是jQuery原生事件绑定的时机不匹配导致的：

• 你写的$("#testform").submit(...)绑定代码，会在页面初始加载、DOM结构就绪的瞬间就执行——这时候需要点击按钮才会生成的动态表单根本还不存在于页面中，jQuery通过选择器找不到对应的DOM元素，自然就没法给它绑定submit事件逻辑。
• 你之前测试静态预置表单方面能正常生效，是因为静态表单在页面初始加载时就已经存在于DOM中，绑定代码执行时能准确选中元素，自然可以正常绑定事件。

方案1：采用事件委托绑定（推荐方案） #

jQuery的事件委托机制可以利用DOM事件冒泡的特性，把事件绑定在页面加载时就已经固定存在的父级容器上，后续动态插入到容器内的匹配元素触发事件时，会被统一捕获执行回调，完全适配动态生成元素的场景。
把原来的submit绑定代码替换为如下写法即可：

// 绑定对象选择页面加载时就存在的父级容器.add_new，指定触发事件的子元素为#testform
$(".add_new").on("submit", "#testform", function(e) {
  e.preventDefault();
  // 直接用this指向当前触发submit的表单元素，无需重复硬选#testform
  const formData = new FormData(this);
  $.ajax({
    url: 'config.php',
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: function() {
      setTimeout(() => {
        // 精准匹配当前表单内的提交按钮，避免多表单场景下的选择偏差
        $(this).find(".addToDatabase").text("Successfully.");
      }.bind(this), 1000);
    }
  })
})

这种方案无需修改你原来的addDiv生成逻辑，一次绑定即可覆盖后续所有动态插入的表单元素，也不会出现重复绑定的问题。

方案2：在表单生成完成后再执行绑定 #

如果你坚持用直接绑定元素的写法，就需要把绑定逻辑移动到表单插入DOM之后执行，避免绑定时代码找不到目标元素：

function addDiv() {
  var panel = document.querySelector(".add_new");
  var div = document.createElement("div");
  div.innerHTML = '<br> <form id="testform" method="POST">  <div class="row" style="padding-left:10rem;">  <div class="col-md-4"> <input type="text" class="form-control" value="" placeholder="Başlık" name="yeniBaslik" required></div> <div class="col-md-4"> <input type="text" placeholder="Açıklama" name="yeniAciklama" class="form-control" value="" required> </div>   <div class="col-md-2 text-left">  <button type="submit" class="btn btn-success btn-animated btn-wide addToDatabase">Add to the Database</button>  </div>  </row> </form> <br>';
  panel.appendChild(div);

  // 表单成功插入DOM后，再执行submit事件绑定
  $("#testform").submit(function(e) {
    e.preventDefault();
    var formData = new FormData($("#testform").get(0));
    $.ajax({
      url: 'config.php',
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
      success: function() {
        setTimeout(() => {
          $(".addToDatabase").html("Successfully.");
        }, 1000);
      }
    })
  })
}

⚠️ 注意这种写法的局限性：如果多次点击创建按钮生成多个同id的表单，会出现id重复、事件重复绑定的问题，维护性弱于事件委托方案。

你当前生成表单的代码里，文本输入框写了两个重复的name属性（第二个input同时存在name="yeniAciklama"和空值name=""），虽然浏览器会自动忽略后面的空属性，但建议删除冗余代码，避免后续取值出现异常。

内容的提问来源于stack exchange，提问作者Berkay O.