Javascript 动态创建不同的克隆表单

在我的HTML中，我有一个普通的表单。表单接受输入并提交。然后，用户将单击一个名为“#addOne”的按钮。此按钮使用jQuery将克隆的表单附加到上一个表单。每个表单都有编号，每个表单都比前一个表单少一个。这些数字将在我的SQLWHERE子句中使用。我希望克隆的表单是单独的表单，例如，如果我为表单9输入值并单击“提交”，然后为表单8输入值，则信息不会相互冲突。表格8的按钮不应提交所有其他表格

以下是我的JSFIDLE：

HTML:

<div class="article_properties">
                        <form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">
                        <p style="display: inline">Page Number</p><div style="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px"<p class="pageNumber"></p></div>
                        <textarea style="display: none" class="inputNumber" name="pageNumber"></textarea>
                        <p>Image</p>
                        <input type="file">
                            <p>Subtitle</p>
                            <input type="text" name="subtitle">

                            <p>Text</p>
                            <textarea name="text" rows="4"></textarea>
                            <input id="properties_btn" type="submit" value="Submit/Update">
                            <hr style="border: 1px dotted lightgray; margin-bottom: 50px">
                        </form>

                        <div id="addOne" style="width: 25px; height: 25px; background-color: orange; border-radius: 50%"><p style="text-align: center; line-height: 25px">+</p></div>

                    </div> <!--End of article properties div-->

var numPages = 10;
$('.pageNumber').text(numPages);
$('.inputNumber').text(numPages);
$('#addOne').click(function()
            {

                numPages--;
                        var articlePropsTemplate = $('.article_properties_form:last').clone();
                        $('.article_properties_form').append(articlePropsTemplate);
                        $('.pageNumber:last').text(numPages);
                        $('.inputNumber:last').text(numPages);

            });

            $('.article_properties_form').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function(data) {

                        }
                    });
                });

此外，我不希望在表单提交时刷新页面。由于某些原因，当单击submit按钮时，动态创建的表单正在创建页面刷新。在表单元素之外创建div也是一种解决方案，但这种技术使表单认为它们是一个表单，但它们应该是单独的表单，所有表单都提交到各自的页码。

更改此行

$('.article_properties_form').append(articlePropsTemplate);

到下面的一个

$('.article_properties').append(articlePropsTemplate);

现在您正在旧表单中添加新表单。所以数据会发生碰撞。您必须将表单附加到旧表单之外。因此，将新表单附加到旧表单的父表单上

用于防止重新加载新表单的页面

$('body').on('submit','.article_properties_form', function(e) {
    //Your code
});

或

$(document).on('submit','.article_properties_form', function(e) {
    //Your code
});

---

这是可行的，但是页面正在刷新动态创建的表单。如何使它们不像第一个表单那样刷新？@user2896120，我已经编辑了答案。解决的办法是thereWorks很棒！最后一个问题，是否可能为这些表单创建唯一的错误？比如说，假设用户输入了第一个表单的数据，但是第二个表单没有。是否可能显示该表单的错误？您可以为每个表单添加一个Id，表示表单的编号。然后您可以检查数字并抛出错误