点击按钮打开模态框时触发Ajax请求的实现方案咨询

解决方案 #

方案1：抽离公共请求方法（推荐，复用性更高） #

将原有change事件中的AJAX逻辑提取为独立公共函数，同时支持下拉选择触发和模态框打开触发，避免代码冗余：

$(document).ready(function(){ 
    // 抽离获取额外字段的公共方法
    function fetchExtraFields() {
        var cnt_man_class_doc_id = $('#class_id').val();
        var cnt_man_folder_id = <?php echo $cnt_man_folder_id; ?>;
        
        $.ajax({
            url:"document_fetch.php",  
            method:"POST",  
            data:{
                cnt_man_class_doc_id:cnt_man_class_doc_id,
                cnt_man_folder_id:cnt_man_folder_id
            }, 
            success:function(data){  
                $('#show_product').html(data);  
            }
        });
    }

    // 绑定原有下拉框change事件
    $('#class_id').change(fetchExtraFields);

    // 绑定模态框打开按钮的点击事件，替换.open-modal-btn为你实际的按钮选择器
    $('.open-modal-btn').on('click', function() {
        // 先给下拉框赋值
        $("#class_id").val("2");
        // 直接调用方法触发AJAX请求
        fetchExtraFields();
        // 原有模态框打开逻辑，示例：$('#xxx-modal').modal('show');
    });
});

方案2：主动触发change事件（无需改动原有逻辑结构） #

你原有写法$("#class_id").val("2").change()本身就可以触发change事件执行AJAX，大多时候失效是执行时机不对：不要在页面初始化时就执行这行代码，要放到点击打开模态框的回调中执行，保证此时下拉框元素已渲染、事件绑定已生效：

// 替换.open-modal-btn为你实际的打开模态框按钮选择器
$('.open-modal-btn').click(function() {
    // 先打开模态框，保证内部元素渲染完成
    $('#你的模态框ID').modal('show');
    // 赋值后主动触发change事件，即可执行AJAX请求
    $("#class_id").val("2").change();
})

异常排查说明 #

如果触发后依然没有执行请求，大概率是下拉框为动态生成元素，原有事件绑定失效，需要改为事件委托的写法：

// 将事件委托到页面加载时就存在的父元素（比如document、模态框父容器）
$(document).on('change', '#class_id', function(){
    // 原有AJAX逻辑保持不变
    var cnt_man_class_doc_id = $(this).val();
    var cnt_man_folder_id = <?php echo $cnt_man_folder_id; ?>;
    
    $.ajax({
        url:"document_fetch.php",  
        method:"POST",  
        data:{cnt_man_class_doc_id:cnt_man_class_doc_id,cnt_man_folder_id:cnt_man_folder_id}, 
        success:function(data){  
             $('#show_product').html(data);  
        }
   });
});

如果使用Bootstrap等框架的模态框，也可以绑定模态框的shown.bs.modal事件，等模态框完全渲染完成后再执行赋值和触发逻辑，避免元素未加载导致的取值错误。

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