jQuery中select触发Ajax调用时变量未刷新引发重复请求的问题求助

看起来你遇到的核心问题是重复的事件绑定加上e.relatedTarget在change事件中的不可靠性，导致每次切换select选项时会触发两次AJAX请求。我来帮你一步步解决：

问题分析 #

1. 事件重复绑定：如果这段绑定代码被多次执行（比如在模态框打开时重复调用、或者页面局部刷新后重新执行），会给同一个select元素绑定多个change事件监听。每次切换选项时，所有绑定的监听都会触发，就会出现先发送旧值请求、再发送新值请求的情况。
2. e.relatedTarget不可靠：relatedTarget属性主要用于鼠标事件（如mouseover/mouseout），在change事件中它的行为并不稳定，无法保证每次都能正确获取到最新的affaire-id，这也可能导致URL中使用了旧的ID值。

解决方案 #

1. 确保事件只绑定一次 #

在绑定新的change事件前，先解绑所有已有的同类型事件，避免重复监听：

// 先解绑再绑定，确保只有一个change事件监听
$('select[name="resource"]').off('change').on('change', function(e) {
    // 2. 换一种可靠的方式获取affaire-id
    // 示例：从父容器/模态框/隐藏input中获取，替换成你页面中实际的选择器
    const affaireId = $(this).closest('.affaire-container').data('affaire-id');
    // 3. 立即获取当前select的最新值
    const resourceValue = $(this).val();

    // 先验证参数有效性，避免无效请求
    if (!affaireId || !resourceValue) {
        console.warn('缺少必要参数：affaire-id或resource值');
        return;
    }

    $.ajax({
        type: 'GET',
        // 使用提前获取的变量拼接URL，确保是最新值
        url: `/affaires/jours/${affaireId}/${resourceValue}`,
        success: function(data) {
            console.log(data);
        },
        error: function() {
            console.error('AJAX请求失败');
        }
    }).done(function(data) {
        // 简化条件判断，让代码更清晰
        const daysProp = data.jour_proposition ? `${data.jour_proposition} jours` : '0 jours';
        const daysRea = data.jour_realisation ? `${data.jour_realisation} jours` : '0 jours';
        
        $('input[name="days_prop"]').val(daysProp);
        $('input[name="days_rea"]').val(daysRea);
    });
});

关键优化点 #

• 解绑后再绑定：.off('change')会移除该元素上所有已有的change事件监听，避免重复触发。
• 可靠获取affaire-id：放弃依赖e.relatedTarget，改为从页面中固定的元素（比如包含该select的父容器、模态框的data-affaire-id属性、或者隐藏的<input>）获取ID，确保每次触发事件时都能拿到最新值。
• 提前获取变量：在事件触发时立即获取resourceValue和affaireId，而不是在AJAX的URL中直接拼接，避免闭包导致的变量引用延迟问题。

额外建议 #

如果你的代码是在模态框中使用，建议将事件绑定放在模态框的shown.bs.modal事件中，并且每次打开模态框时重新绑定（配合.off('change')），这样可以确保模态框每次打开时都能正确获取最新的affaire-id。

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