附加克隆窗体刷新页面，但不应该

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 /阿贾克斯

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

在一个侧面说明，它可能是更好地使用button元素与type="button"。然后，您可以使用onclick事件而不是onsubmit。这只是一个建议，无论哪种方式都行得通。