数据未通过Ajax获取

Question

我有一个页面index.php，其中包含以下代码

<div class="form-group">
    <select name="assignto" id="assignid">
        <option value="">Choose</option>
        <option value="all">All</option>
        <option value="selective">Selective</option>
    </select>
</div>

<div class="form-group" id="displaydata"></div>

<div class="form-group" id="recruiter"></div>

此页面上使用的Ajax代码是

<script>
$(document).ready(function(){
    $('#assignid').change(function(){

        var assignid_id = $('#assignid').val();
        console.log($('#assignid'))
        if(assignid_id != 0)
        {

            $.ajax({
                type:'post',
                url:'a_fetchrecruiter_skill.php',
                data:{id:assignid_id},
                cache:false,
                success: function(returndata){
                    $('#displaydata').html(returndata);
                    console.log(returndata)
                }
            });
        }
    })
})
</script>

<script>
$(document).ready(function(){
    $('#areaid').change(function(){

        var areaid_id = $('#areaid').val();
        console.log($('#areaid'))
        if(areaid_id != 0)
        {

            $.ajax({
                type:'post',
                url:'a_fetchrecruiter.php',
                data:{id:areaid_id},
                cache:false,
                success: function(returndata){
                    $('#recruiter').html(returndata);
                    console.log(returndata)
                }
            });
        }
    })
})
</script>

如果从第一个下拉菜单中选择了该值，则第二个下拉菜单将从a_fetchrecruiter_skill.php页面中获取适当的值。

a_fetchrecruiter_skill.php页面上的代码是

if($assignid_id=='selective')
    { ?>

        <label for="input01" class="col-sm-2 control-label" style="color:black; font-weight:bold; font-size:15px; margin-top: -8px;">Select area </label>
            <div class="col-sm-10">
                <?php
                    $sql="SELECT * FROM recruiter_skill group by recruiter_skill";
                    $result = mysqli_query($con,$sql);
                ?>
                <select name="assignto" class="form-control" id="areaid">
                <?php
                    if(mysqli_num_rows($result)>0)
                        {?>
                            <option value="">Choose</option>
                            <?php 
                                while($row=mysqli_fetch_assoc($result))
                                    {?>
                                        <option value="<? echo $row['recruiter_skill'];?>"><? echo $row['recruiter_skill'];?></option>
                                    <?}
                        }
                    else
                        {?>
                            <option value="">No value available</option>
                      <?}?>
                </select>
            </div>
    <?}
?>

现在的问题是，当用户从第二个下拉列表中选择值时，应该从a_fetchrecruiter.php页面显示这些值，但是第二个ajax无法正常工作。 它没有将值携带到a_fetchrecruiter.php我试图通过console.log打印数据，但那里什么也没有出现。有人可以指出错误吗？

Answer 1

您正在延迟加载内容。 每当动态加载内容时，您都需要针对已存在的父项将事件绑定到子项。

例如：

$('#areaid').change(function(){

应该更改为

$('body').on('change', '#areaid', function() {

Answer 2

加载页面后，带有#areid的元素不存在，因此不会触发change事件。

您必须使用jquery的delegate函数： http : //api.jquery.com/delegate/

$('#displaydata').delegate('#areaid','change', function(){

    var areaid_id = $('#areaid').val();
    console.log($('#areaid'))
    if(areaid_id != 0)
    {

        $.ajax({
            type:'post',
            url:'a_fetchrecruiter.php',
            data:{id:areaid_id},
            cache:false,
            success: function(returndata){
                $('#recruiter').html(returndata);
                console.log(returndata)
            }
        });
    }
})

Answer 3

从ajax而非$(document).load #areaid加载change事件后，必须将change事件绑定到#areaid $(document).load