javascript - 附加的克隆表单刷新页面但不应该

Question

我有一个普通表单，最初是一个表单，但是当用户单击“#addOne”按钮时，会使用 jQuery 显示前一个表单的克隆。表单数据使用Ajax中继，当用户点击提交表单时，由于e.preventDefault()，表单不会刷新；问题是动态创建的表单出于某种原因正在刷新页面。不是动态创建的第一个表单不会刷新页面。这是什么原因？如何使动态创建的表单不刷新页面？

每个表格都有编号，每个表格都比前一个表格少一个。这些数字将在我的 SQL WHERE 子句中使用。我希望克隆的表单是单独的表单，例如，如果我输入表单 9 的值并单击提交，然后输入表单 8 的值，信息将不会相互冲突。表格 8 的按钮不应该为所有其他表格提交

这是我的代码和 jsfiddle:https://jsfiddle.net/2c2xL0cz/

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-->

jQuery/Ajax

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) {

                        }
                    });
                })

Answer 1

问题是您正在复制 form 元素，然后将该 form 附加到之前的 form。 $('.article_properties_form').append(articlePropsTemplate); 是实际问题，你需要 $('.article_properties').append(articlePropsTemplate);.

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

  numPages--;
  var articlePropsTemplate = $('.article_properties_form:last').clone();
  $('.article_properties').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) {

    }
  });
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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-->

附带说明一下，使用带有 type="button" 的 button 元素可能会更好。然后您可以使用 onclick 事件代替 onsubmit。这只是一个建议，任何一种方式都行。