追加されたクローンフォームはページをリフレッシュしません

Question

私は最初は1つのフォームですが、ユーザーが "＃addOne"ボタンをクリックすると、前のフォームのクローンがjQueryを使用して表示されます。フォームデータはAjaxを使用してリレーされ、フォームを送信するためにユーザーがクリックすると、フォームはe.preventDefault（）によってリフレッシュされません。問題は、何らかの理由で動的に作成されたフォームがページをリフレッシュしていることです。動的に作成されない最初のフォームは、ページを更新しません。これの原因は何ですか？動的に作成されたフォームをページを更新しないようにするにはどうすればよいですか？

各フォームには番号が付けられていますが、各フォームは以前のフォームよりも1つ少なくなります。数字は私の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-->

、type="button"でbutton要素を使用する方がよいかもしれません。次にonsubmitの代わりにonclickイベントを使用できます。これは単なる提案であり、どちらの方法でも動作します。