Question

我在AJAX页面中使用Php添加表单，现在我在该表单中添加了使用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

您指的是在加载页面时不存在的元素，这就是为什么不输入click事件。试试这个。

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

如何使用AJAX以另一种形式添加表单？但请记住，第一个表单也添加了AJAX

1 个答案: