AJAXは1つのサブフォームにクローンフォームのデータを投稿します

Question

私は '友達紹介'ページのために複数のフォームを1つの投稿に投稿しています。最初は、2つのフォームがあります.1つはリファラー用で、もう1つはリフェラル用です。ユーザーは参照フォームをclone（）してコンテナに追加するプラス記号をクリックすることで、より多くの紹介フォームを追加することができます。

<div class="form-wrap"> 
    <form id="referrer-form" role="form" action="<?=$_SERVER['REQUEST_URI'];?>" method="post" > 
    inputs... 
    </form> 
    <form id="first-ref" class="referral-form" role="form" action="<?=$_SERVER['REQUEST_URI'];?>" method="post"> 
    inputs... 
    </form> 
</div> 
<div class="buttons"> 
    <a id="plus" class="btn btn-primary" href=""></a> 
    <a id="minus" class="btn btn-danger" href=""></a> 
    <button id="submit" class="btn btn-warning btn-lg form-control">SUBMIT</button> 
</div> 

私の現在のjQueryでは、2つのフォームがページマークアップのポストだけで読み込まれます。しかし、clone（）されているものは投稿していません。すべての属性は同じように見えます。

各フォーム

var form = $('form'); 

    $("#submit").click(function() { 
     $('#referrer', '#referrer-form').val('what is posted to leadsource field'); 
     $(form).each(function() { 
      if ($(this).attr("id") != "referrer-form") { 
       $('#referrer', this).val('Referred by: ' + $('#referrer-form #name').val()); 
      } 
      var formData = $(this).serialize(); 
      $.ajax({ 
       type: 'POST', 
       url: $(form).attr('action'), 
       data: formData 
      }); 
     }); 
     alert("form submitted"); 
     $('form input').val(''); 
    }); 

    $("#plus").click(function() { 
     $("#first-ref").clone().appendTo(".form-wrap"); 
     $(".referral-form").last().attr('id', ''); 
     $(".referral-form").last().find('input').val(''); 
     load_phoneMask_js(); 
    }); 

    $("#minus").click(function() { 
     $(".referral-form").last().remove(); 
    }); 

</script> 

Answer 1

に// AJAXポストは、jQueryのclone()は、あなたがデータとイベントを保持したい場合は、あなたがtrue

$("#first-ref").clone(true).appendTo(".form-wrap"); 

を渡す意味、.clone([withDataAndEvents ])の形で引数を持っていますイベントハンドラの中でこれらのフォームを確実に入手してください。

$("#submit").click(function() { 
    var form = $('form'); 

    ... etc