该脚本在以下 php 文件中不起作用

Question

我的脚本不工作，应该添加关于客人的字段。

添加更多按钮不起作用

这是供客人使用 MySQL、PHP、JavaScript、Jquery、AJAX 和 HTML 填写的表格。

$(document).ready(function() => 这个功能好像不行。我尝试使用警报进行检查，但它仍然没有在浏览器中显示任何警报消息（Chrome 和 Edge）。

JAVASCRIPT + JQUERY + AJAX 文件

<script>
$(document).ready(function(){  

    alert("Alert me,fksdkf");
    var i=1;

    $('#add').click(function(){

        i++;

        $('#dynamic_field').append('<div class="dynamic-added" id="'+i+'"><div class="container"><div class="col-xs-5">Name Of Occupant <br><input type="text" name="na[]" placeholder="Name" value=" <?php print_r($na); ?>" class="form-control name_list" required="" ><br><br></div><div class="col-xs-3">Relation <br><select class="form-control name_list" value=" <?php print_r($rl); ?>" name="rl[]"><option value="Father" >Father</option>  <option value="Daughter" >Daughter</option>     <option value="Wife" >Wife</option>  <option value="Son" >Son</option> <option value="Mother" >Mother</option> <option value="Sister" >Sister</option> <option value="Brother" >Brother</option> <option value="Friends" >Friends</option> <option value="Cousin" >Cousin</option> <option value="Self" >Self</option> <option value="Other" >Other</option>    </select><br><br>  </div> <div class="col-xs-2"> Age <br><input type="text" name="ag[]" placeholder="Age" value=" <?php print_r($ag); ?>" class="form-control name_list " required="" > <br><br> </div>  <div id="blk" class="col-xs-3"> Block <br> <select name="bl[]" class="form-control name_list" value=" <?php print_r($bl); ?>" onchange="Occupant(this.value)"> <option value="">Select</option> <option value="officer" >Officers Block</option> <option value="jcoblock">JCOs Block</option>  <option value="orBlock" >ORs Block</option>                   </select><br><br></div><div class="col-xs-3" id="dr">Type <br> <select name="type[]" class="form-control name_list" value=" <?php print_r($type); ?>" onchange="rodo(this.value)" > <option value="">Select</option> <option value="r">Room</option><option value="d">Dormitory</option>  </select><br><br> </div> <div class="col-xs-3" id="roo"> Rooms Available<br><select name="room[]" class="form-control name_list" value=" <?php print_r($room); ?>"> <option value="">Select</option> <option id="o1">o1(F)</option> <option id="o2">o2(f)</option> <option id="o3" >o3(f)</option> </select><br><br></div> <div class="col-xs-3" id="doo"> Dormitory  <br> <select name="dorm[]" class="form-control name_list" onchange="bed(this.value)" value=" <?php print_r($dorm); ?>"> <option value="">Select</option><option id="d1">d1(F)</option> <option id="d2">d2(f)</option> <option id="d3" >d3(f)</option> </select><br><br> </div> <div class="col-xs-2" id="doo">           Bed<br> <select name="bed[]" class="form-control name_list" value=" <?ptp print_r($bed); ?>"> <option value="">Select</option> <option id="b1">b1(F)</option><option id="b2">b2(f)</option><option id="b3" >b3(f)</option> </select><br><br> </div><div class="col-xs-4" id="doo">              Bed Charge(per day) <br> <input type="number" name="bcharge[]" placeholder="300" class="form-control name_list" value=" <?php print_r($bcharge); ?>"required="" ><br><br> </div> <div class="col-xs-4" id="doo"> Dorm Electricity Charge (per day) <br> <input type="number" name="dcharge[]" placeholder="10" class="form-control name_list" required="" value=" <?php print_r($dcharge); ?>" ><br><br> </div> <div class="col-xs-4" id="roo"> Room Charge (per day) <br>  <input type="number" name="rcharge[]" placeholder="500" class="form-control name_list" value=" <?php print_r($rcharge); ?>" required="" ><br><br> </div><div class="col-xs-4" id="roo"> Room Electricity Charge (per day) <br><input type="number" name="recharge[]" value=" <?php print_r($recharge); ?>"placeholder="20" class="form-control name_list" required="" ><br><br></div> <div class="col-xs-5" id="doo"> Security Deposit <br><input type="number" name="sec[]" placeholder="300" class="form-control name_list" value=" <?php print_r($sec); ?>" required="" ><br><br></div><div class="col-xs-5" id="doo">Booking Date From  <br>  <input type="date" value=" <?php print_r($bdf); ?>" name="bdf[]" placeholder="300" class="form-control name_list" required="" ><br><br></div><div class="col-xs-5" id="doo"> Booking Date To  <br> <input type="date" name="bdt[]" placeholder="300" class="form-control name_list" value=" <?php print_r($bdt); ?>" required="" ><br><br> </div>  <div class="col-xs-2"><br><button type="button" name="add" id="add" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>Add More</button></div><br><div class="col-xs-2"><br><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">Remove</button></div></div></div>');  

    });


    $(document).on('click', '.btn_remove', function(){  
        var button_id = $(this).attr("id");   
        $(''+button_id+'').remove(); 
    }); 


    $('#submit').click(function(){            
        $.ajax({  
            url:"addmore.php",  
            method:"POST",  
            data:$('#add_name').serialize(),
            type:'json',
            success:function(data)  
            {
                i=1;
                $('.dynamic-added').remove();
                $('#add_name')[0].reset();
                        alert('Record Inserted Successfully.');
            }
        });  
    });
});

负责添加按钮的html代码

<div class="col-xs-2">
    <br>
    <button type="button" name="add" id="add" class="btn btn-success">
    <span class="glyphicon glyphicon-plus"></span>Add More</button>               
</div>   
<div class="col-xs-2"><br><br>
    <input type="button" class="btn btn-info" name="submit" id="submit" value="Submit">
</div>

Answer 1

使用这个 jquery 库文件链接。您可以使用此库文件链接您的 PC 或笔记本电脑必须连接到 Internet。 别的 您可以下载库文件并上传到本地。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>

成功包含此库文件后，检查您的 jquery 代码是否正常工作。

$(document).ready(function(){  

    alert("Alert me,fksdkf");
})