AJAXを使用して別のフォームでフォームを追加するには？しかし、最初のフォームもAJAXで追加されています。

Question

AJAXをPhpページに追加しました。AJAXを使用して作成されたフォーム内に葯のフォームを追加しましたが、機能しません。

これは親ページです。まず、フォームを追加するために、次のされてAJAXでの作業に

<div class="col-xs-12 mg-top-30 text-left" id="studentstatus"> 
     <div class="col-sm-1 hidden-xs"></div> 
     <div class="col-sm-2"> 
        <label for="" class="control-label">Are you a?</label> 
     </div> 
     <div class="col-sm-5"> 
        <label class="radio-inline"> 
        <input type="radio" name="studentstatus" value="fresh">Freshman</label> 
        <label class="radio-inline mg-top-5"> 
        <input type="radio" name="studentstatus" value="compart">Reappeared</label> 
     </div> 
    </div>      
    <div id="adddata"></div>` 

JQuery：

$(function() { 

    $('#studentstatus input:radio').change(
     function() { 
      var index = this.value; 
      $.get(
       "add_freshman_form_in_maprevios.php", { 
        studentstatus: index 
       }, 
       function (data) { 
        $("#adddata").html(data); 
       } 
      ); 
     } 
    ); 
}); 

add_freshman_form_in_maprevios.phpページHTMLコードは次のとおりです。

$output='<div class="col-xs-12 mg-top-10 text-left"> 
          <div class="col-sm-1 hidden-xs"></div> 
          <div class="col-sm-2"> 
           <label for="" class="control-label">Roll No.</label> 
          </div> 
          <div class="col-sm-2"> 
           <input type="number" class="btn-block input-sm" placeholder="Previous roll no."> 
          </div> 

         </div> 
         <div class="col-xs-12 mg-top-10 text-left"> 
          <div class="col-sm-1 hidden-xs"></div> 
          <div class="col-sm-3"> 
           <label for="" class="control-label">Write down the names of failed papers:</label> 
          </div> 
         </div> 
         <div class="col-xs-12 mg-top-10 text-left"> 
          <div class="col-sm-1 hidden-xs"></div> 
          <div class="col-sm-2"> 
           <input type="text" class="btn-block input-sm" placeholder="Failed Paper name..."> 
          </div> 
         </div> 
         <div class="col-xs-12 text-left"> 
          <div class="col-sm-1 hidden-xs"></div> 
          <button class="mg-left-15 color addanother"> <i class="fa fa-plus-circle " > <label for="">Add another</label></i></button> 
          <div id="compartpaper"></div> 
         </div>'; 
    echo $output; 

それは非常によく働いたがときに私れますこのフォームの別のテキストボックスがAJAXを使用しています。この目的のために私はJQueryコードをメインページに書きます。

$('.addanother').click(function (e) { 
    e.preventDefault(); 

    $.get(
     "add_compart_form_in_previous_paper.php", { 
      username: $("#username").val() 
     }, 
     function (data) { 
      $("#compartpaper").append(data); 

     } 
    ); 
}); 

私は、このページに追加するフォーム平均である：あなたはページがロードされたときに存在しない要素を参照している

<?php 
    $output='<div class="col-sm-2"> 
        <input type="text" class="btn-block input-sm" placeholder="Failed Paper name..."> 
       </div>'; 
    echo $output; 
    ?> 

Answer 1

に入力していない理由、それはありますクリックイベント。代わりにこれを試してください。

$("#adddata").on("click", ".addanother", function(){ 
    //your code 
});