How to add form with in another form using AJAX? B

Question

I add a form using AJAX in a Php page now I add anther form within that form which is created using AJAX but it is not working.

This is the parent page.

   <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 to working with AJAX is the following for adding First form:

$(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 page HTML code is:

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

It is working very well but when I want another textbox in this form using AJAX than it is not working. I write JQuery code for this purpose into the main page.

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

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

        }
    );
});

The Form which I want to add in this page is mean :

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

Answer 1

You're referring to an element that does not exist when the page is loaded , it is why not enter on the click event. Try this instead.

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