使用Javascript - 解析动态添加表格(Javascript - parsing dyna

我怎样才能与已经奔动态添加的形式工作？

你好。我用下面的代码片段动态添加表格到我的网页。现在一切正常：

$(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);


});

与被称为一个伟大的工具添加我解析它们的形式之后jQuery的序列化对象并创建一些对象文本（f.ex. {"name":"John","content":"blah blah"}

然后我打开这些对象文本转换为JSON与JSON.stringify()

一切都以简单的形式顺利woorks，但是当我尝试解析形式，我动态添加。我收到{“名”：“”，“内容”：“”}数据，因为我解析形式尚不存在。

问题：我能得到一些阅读材料或提示我怎么能修改jQuery的序列化对象解析的形式，我的广告动态？扩展的代码对我来说有点太复杂了。

编辑：

我发现了另一个JavaScript片段jquery.serializeJSON序列化形式转换为JavaScript对象（json.stringify（）“将其投入的Json更高版本）和它似乎是更先进的日期，它是积极发展，但我我得到完全同样的结果吧： {"name":"","content":""}

答案：

其实我应该序列上的提交事件，而不是按一下按钮的形式。这样，我将在用户填写后，被序列化的数据。我应该把结束标记之后的提交按钮，而不是之前。工作代码：

$(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" class="new_topic">'+ document.getElementById('csrf_token').value +
                  '<textarea id ="1" name="name" maxlength="1000" cols="25" rows="6" id="new_form"></textarea><br><input type="submit" value="Submit" class="newMygt" /></form>'
                  );


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


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


});




$('#buildyourform').on('submit', 'form', function() {
    var $submittedForm = $(this); // form where you clicked submit button
    var $forms = $submittedForm.parents('.fieldwrapper').find('form'); // both forms
    var serializedForm = $forms.serializeJSON(); // serialize both forms
    var json = JSON.stringify(serializedForm);
    alert(json)
    event.preventDefault(); // do not submit the form
});

现在，我得到正是我想要的：

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

Answer 1:

这没有什么错插件的，既serializeJSON和序列化对象可以读取动态创建的形式。

我不知道你是如何读书迟的形式，但你必须确保他们在你序列化他们的时间存在。

我创建了一个小提琴试试你的代码jquery.serializeJSON ： http://jsfiddle.net/vG39k/

我试图序列“提交”事件，并意识到你有input type="submit"的形式外的按钮，所以他们没有触发一个事件提交。

需要注意的是在小提琴，我把</form>结束标记之后的提交按钮，而不是之前。这可能是你的问题。

提示：使用fiddle.net或其他类似的工具来测试你的代码;）

Answer 2:

有一对夫妇的问题，我马上看到，但我还没有来得及在你的答案完全走还

您</form>标签是你的提交按钮之前
通常你想序列化的形式submit事件
```
 $("form").submit(function(event) { var obj = $(this).serializeObject(); console.log(obj); var json = $(this).serializeJSON(); console.log(json); event.preventDefault(); }); 
```
这样，在用户已经装满它，你将被序列化的值。
但是，我们需要作出轻微修改，是因为你是动态创建的形式。我们需要用“活”听者jQuery的。对功能
```
 $("document").on("submit", "form", function(event) { // ... }); 
```
这将附上一个提交事件侦听器的文档，但它会通过任何形式的气泡一个提交事件触发。这意味着它会为那些页面加载后动态创建的形式工作，太。