AJAX加载后selectpicker的change事件失效问题求助

我有两个Bootstrap Selectpicker组件，分别用于选择城市和城镇。切换城市选项时，通过AJAX加载对应城镇数据的功能正常，但加载完成后，城镇选择器的change事件完全没反应；只有页面刷新后直接操作城镇选择，事件才会正常触发。

原代码 #

index.php

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-select.css" />
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <?php
    header("Cache-Control: no cache");
    ?>
</head>
<body>
<div class="cityList col-lg-3 col-md-6 col-sm-3">
    <label for="citySelect2" class="labelsfilter ml-2">City</label>
    <select class="selectpicker mb-3" id="citySelect2" name="citySelect2" data-width="100%" data-live-search="false" required="required">
        <option value="">Select City</option>
        <?php
        $myQuery = "SELECT * FROM tessCityTable";
        $statement = $konn->prepare($myQuery);
        $statement->execute();
        $results = $statement->fetchAll(PDO::FETCH_ASSOC);
        if ($results){
            foreach ($results as $result){
                if (isset($cityID2)){
                    if ($cityID2 == $result['cityID']){
                        echo ('<option value="'.$result['cityID'].'" selected>'.$result['cityName'].'</option>');
                    }
                    else {
                        echo ('<option value="'.$result['cityID'].'">'.$result['cityName'].'</option>');
                    }
                }
                else {
                    echo ('<option value="'.$result['cityID'].'">'.$result['cityName'].'</option>');
                }
            }
        }
        ?>
    </select>
</div>                  
<div id="townList2" class="townList2 col-lg-3 col-md-6 col-sm-3">
    <label for="townSelect2" class="labelsfilter ml-2">Town</label>
    <select class="selectpicker mb-3 show-tick townSelect2" id="townSelect2" name="townSelect2[]" multiple="multiple" data-live-search="false" data-width="100%" data-selected-text-format="count">
        <option value="0">Select Town</option>
    </select>
</div>
</body>
</html>
<script>            
$(document).ready(function() {
    $('#townSelect2').selectpicker();

    $("#citySelect2").change(function() {
        var selectedCity = $(this).val();

        $.ajax({
            type: "POST",
            url: "query.php",
            data: 'keyword=' + selectedCity,
            success: function(data) {
                var response = JSON.parse(data);

                $('.townList2').html(response.townList);
                $('.townSelect2').selectpicker('refresh');
            }
        });
    });

    $('#townSelect2').on('changed.bs.select', function(e) {
        //Nothing Happens
            console.log("changed.bs.select event triggered");
            console.log("e:", e);
    });

    $("#townSelect2").change(function() {
        //Nothing Happens
        console.log("changeEvent");
    });
})
</script>

query.php

if (!empty($_POST["keyword"])) {
    $townList = "";
    $cityID = $_POST['keyword'];
    $myQuery = "SELECT * FROM tessTownTable WHERE cityID=:cityID";
    $statement = $konn->prepare($myQuery);    
    $statement->bindParam(':cityID', $cityID);
    $statement->execute();
    $result = $statement->fetchAll(PDO::FETCH_ASSOC);
    if (!empty($result)) {
        $townList = $townList . '<label for="townSelect2" class="labelsfilter ml-2">İlçe</label>';
        $townList = $townList . '<select class="selectpicker mb-3 show-tick townSelect2" id="townSelect2" name="townSelect2[]" multiple="multiple" data-live-search="false" data-width="100%" data-selected-text-format="count">';
        $townList = $townList . '<option value="0">İlçe Seçiniz</option>';
        foreach ($result as $town) { 
            $townList = $townList . '<option value="'.$town['townID'].'">'.$town['townName'].'</option>';
        }
        $townList = $townList . '</select>';

        $konn = null;
        $statement = null;

        $response = array(
            "townList" => $townList
        );
        
        $jsonResponse = json_encode($response);
        echo $jsonResponse;  
    }
}

问题原因 #

页面初始化时，事件仅绑定到当时存在的#townSelect2元素上。AJAX加载完成后，你用$('.townList2').html(response.townList)替换了整个城镇选择器的DOM结构，新生成的#townSelect2元素没有绑定任何事件，因此操作时不会触发回调。

解决方案 #

方案1：事件委托（快速修复）

将事件绑定到父级元素或document上，无论元素是初始存在还是动态生成，都能触发事件：

// 替换原有的两个事件绑定代码
$(document).on('changed.bs.select', '#townSelect2', function(e) {
    console.log("changed.bs.select event triggered");
    console.log("e:", e);
});

$(document).on('change', '#townSelect2', function() {
    console.log("changeEvent");
});

方案2：优化AJAX逻辑（推荐）

不替换整个select元素，仅更新其option列表，保留原DOM元素和事件绑定：

1. 修改query.php，只返回城镇选项片段：

if (!empty($_POST["keyword"])) {
    $cityID = $_POST['keyword'];
    $myQuery = "SELECT * FROM tessTownTable WHERE cityID=:cityID";
    $statement = $konn->prepare($myQuery);    
    $statement->bindParam(':cityID', $cityID);
    $statement->execute();
    $result = $statement->fetchAll(PDO::FETCH_ASSOC);
    
    $options = '<option value="0">Select Town</option>';
    if (!empty($result)) {
        foreach ($result as $town) { 
            $options .= '<option value="'.$town['townID'].'">'.$town['townName'].'</option>';
        }
    }
    
    $response = array(
        "townOptions" => $options
    );
    
    echo json_encode($response);  
}

2. 修改index.php的AJAX回调：

$("#citySelect2").change(function() {
    var selectedCity = $(this).val();

    $.ajax({
        type: "POST",
        url: "query.php",
        data: 'keyword=' + selectedCity,
        success: function(data) {
            var response = JSON.parse(data);
            // 清空原有选项并插入新选项
            $('#townSelect2').empty().html(response.townOptions);
            // 刷新selectpicker组件
            $('#townSelect2').selectpicker('refresh');
        }
    });
});

内容的提问来源于stack exchange，提问作者Tugrul