Javascript-解析动态添加的表单

如何处理动态添加的表单？

你好。我正在使用下面的代码段动态地向我的页面添加表单。现在一切正常：

$(document).ready(function() {
$("#add").click(function() {
    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/><br>");
    // I am adding 2 new forms there:
    var topic = $( '<form action = "#" method = "POST" name="new_topic" id="new_topic">'+ document.getElementById('csrf_token').value +
                  '<textarea  name="name" maxlength="1000" cols="25" rows="6" id="new_form"></textarea></form>'+
                  '<br><input type="submit" value="Submit" class="newMygt" />');


    var summary = $('<form action = "#" method = "POST" name="new_summary" id="new_summary">'+ document.getElementById('csrf_token').value +
                    '<textarea  name="content" maxlength="1000" cols="25" rows="6" id="new_form"></textarea></form>'+
                    '<br><input type="submit" value="Submit" class="newMygt" />');


    (topic).appendTo(fieldWrapper).show('slow');
    (summary).appendTo(fieldWrapper).show('slow');
    $("#buildyourform").append(fieldWrapper);


});

现在我得到了我想要的东西：

{"name":"John","content":"blah blah blah"}

---

插件并没有问题，serializeJSON和serialize对象都可以读取动态创建的表单

我不知道你以后是如何阅读表单的，但是你需要确保在序列化表单时表单存在

我创建了一个小提琴来试用您的代码：

我试图序列化“提交”事件，并意识到表单外有

input type=“submit”

按钮，因此它们没有触发提交事件

请注意，在小提琴中，我将

结束标记放在提交按钮之后，而不是之前。 那可能是你的问题

---

提示：使用或其他类似工具测试代码；）

我马上就看到了几个问题，但我还没来得及仔细考虑你的答案

您的

标签位于提交按钮之前

您通常希望在

submit

事件中序列化表单

$("form").submit(function(event) {

  var obj = $(this).serializeObject();
  console.log(obj);

  var json = $(this).serializeJSON();
  console.log(json);

  event.preventDefault();
});

这样，您将在用户填写后序列化这些值

但是，我们需要对此稍作修改，因为您正在动态创建表单。我们需要使用带有jQuery函数的“实时”侦听器

这将向文档附加一个提交事件侦听器，但任何弹出提交事件的表单都会触发该侦听器。这意味着它也适用于页面加载后动态创建的表单

---

你能给这两个文本区域提供不同的ID吗？谢谢你的快速回复！嗯，我认为这不会改变任何事情。。我刚试过，结果是一样的。谢谢你的更正和提示，我一定会研究的。那个但我试图实现的是在一个按钮单击事件中序列化两个表单的数据，就像当我单击一个按钮时，会弹出一个警报（json），显示{“name”：“test1”，“content”：“test2”}。你能帮我吗？在我看来，你想要的是只有一种形式，而不是两种形式。不幸的是，在这种特殊情况下，两种形式正是我所需要的。。我正在为学生创建一个基于Django框架的应用程序（用于总结讲座），其中一个窗体将显示主题名称，第二个窗体将显示讲座摘要。这个课堂总结模式将贯穿整个页面。现在，我需要能够动态地将这些表单添加到页面中。无论哪种方式，如果您真的想要拥有UI，您都可以使用jquery.serializeJSON一次性序列化这两个表单。只需确保jQuery选择器中的两个表单都匹配即可。这把小提琴告诉你：这正是我所需要的！代码现在完全按照我想要的那样工作。感谢您的帮助和时间：）虽然我的问题已经得到了回答，但感谢您的帮助和时间，您的提示让我对js‘logic’的工作原理有了更深入的了解，我还需要进一步研究。祝你考试顺利@Eimantas，我已经更新了我的答案，以展示如何直接序列化为JSON。此问题已在的最新版本中修复。

$("form").submit(function(event) {

  var obj = $(this).serializeObject();
  console.log(obj);

  var json = $(this).serializeJSON();
  console.log(json);

  event.preventDefault();
});

$("document").on("submit", "form", function(event) {
  // ...
});