數據未通過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