jQuery函数触发问题：支付页面选中银行时需重新发起AJAX请求

我明白你的问题了：现在只有切换单选支付选项时才会发AJAX请求，但选中下拉里的银行时，没法重新生成支付按钮的URL。你的尝试代码没生效，主要是事件绑定的位置不对，而且下拉变化时没触发实际的AJAX请求逻辑。

问题分析 #

你把#idealbank的change事件绑定放在了toppaymentopt单选按钮的change回调里，这会导致：

• 每次切换单选按钮，都会重复绑定下拉的事件，可能引发多次触发的问题
• 如果一开始没选中ID为10的支付选项，下拉的事件根本不会被绑定上
• 就算绑定了，你也只获取了银行值，没有调用后续生成支付按钮的AJAX逻辑

修复后的代码方案 #

我把AJAX请求的逻辑封装成了一个独立函数，这样不管是切换支付选项，还是选择银行，都能调用这个函数更新支付按钮：

// 封装更新支付按钮的AJAX逻辑
function updatePaymentButton() {
    // 获取当前选中的支付选项ID
    const selectedPaymentOpt = tpj('input[name="toppaymentopt"]:checked').attr('id');
    // 获取选中的银行值（如果是ID10的支付方式）
    let idealBankValue = '';
    if (selectedPaymentOpt === '10') {
        idealBankValue = tpj('#idealbank').val();
    }

    // 显示加载状态
    tpj(".buttoncheckout").html("<img class='loadingif' src='images/loading.gif'>");

    // 处理异址配送参数
    let afwijkendpostcode = '',
        afwijkendhuisnummer = '',
        afwijkendstraat = '',
        afwijkendplaats = '';
    if (tpj('input[name="checkbox"]').prop('checked')) {
        afwijkendpostcode = tpj('input[name="billing_postcodeafw"]').val();
        afwijkendhuisnummer = tpj('input[name="billing_housenumberafw"]').val();
        afwijkendstraat = tpj('input[name="straatafw"]').val();
        afwijkendplaats = tpj('input[name="plaatsafw"]').val();
    }

    // 发起AJAX请求（补全你原来的$betaalid等参数）
    const url = 'includes/betaal.php';
    const betaalid = selectedPaymentOpt; // 假设这是支付选项ID
    tpj.ajax({
        url: url,
        type: 'POST',
        data: {
            toppaymentopt: betaalid,
            idealbank: idealBankValue,
            billing_postcodeafw: afwijkendpostcode,
            billing_housenumberafw: afwijkendhuisnummer,
            straatafw: afwijkendstraat,
            plaatsafw: afwijkendplaats
            // 这里可以添加其他需要传递的参数
        },
        success: function(response) {
            // 成功后更新支付按钮的内容，比如生成带有URL的按钮
            tpj(".buttoncheckout").html(`<a href="${response.paymentUrl}" class="payment-btn">完成支付</a>`);
        },
        error: function() {
            // 处理错误情况
            tpj(".buttoncheckout").html('生成支付链接失败，请重试');
        }
    });
}

// 页面加载完成后初始化
tpj(document).ready(function() {
    // 绑定单选支付选项的change事件
    tpj('#checkoutform').on('change', 'input[name="toppaymentopt"]', function () {
        const selectedId = tpj(this).attr("id");
        if (selectedId === '10') {
            tpj("#idealbank").show();
            // 如果选中ID10，立即调用一次更新（默认选中第一个银行的话）
            updatePaymentButton();
        } else {
            tpj("#idealbank").hide().val(''); // 隐藏并清空银行选择
            updatePaymentButton();
        }
    });

    // 绑定银行下拉菜单的change事件
    tpj('#checkoutform').on('change', '#idealbank', function () {
        // 只有当选中的支付选项是ID10时才触发
        const selectedPaymentOpt = tpj('input[name="toppaymentopt"]:checked').attr('id');
        if (selectedPaymentOpt === '10') {
            updatePaymentButton();
        }
    });

    // 页面初始化时如果已经选中了ID10，显示下拉并更新按钮
    const initialPaymentOpt = tpj('input[name="toppaymentopt"]:checked').attr('id');
    if (initialPaymentOpt === '10') {
        tpj("#idealbank").show();
        updatePaymentButton();
    } else {
        tpj("#idealbank").hide();
    }
});

关键改动点 #

1. 封装AJAX函数：把生成支付按钮的逻辑抽成updatePaymentButton()，避免重复代码，方便多处调用
2. 独立绑定下拉事件：把下拉菜单的change事件绑定放在全局，确保只要选中银行就能触发请求
3. 联动逻辑处理：切换支付选项时，先处理下拉的显示/隐藏，再调用更新函数；选择银行时，先判断当前是否是ID10的支付方式，再触发更新
4. 初始化处理：页面加载时根据默认选中的支付选项，自动调整下拉的显示状态并生成初始按钮

这样不管是切换支付选项，还是选择不同的银行，都会重新发起AJAX请求，生成对应的支付按钮啦！

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