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加载后，您必须将change事件绑定到#areaid，而不是$(document).load

数据无法通过ajax

3 个答案: