javascript - 如何使用 AJAX 在另一个表单中添加表单？但请记住第一个表单也添加了 AJAX

Question

我在 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 与 AJAX 一起使用，添加第一个表单如下:

$(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
});