Laravel中Select2选值后API取数至动态表格控件及事件重复触发解决

问题场景 #

在Laravel项目的动态表格中，实现了动态添加带Select2的行（用于选择Ledger）和余额输入框功能。当前Select2的Ajax数据加载、新增行功能正常，但存在两个核心问题：

1. 修改已选中的Select2选项时，select2:select事件会多次触发（例如3行表格中修改第一行选项，控制台重复打印3次相同值）
2. 选中Ledger后，无法将获取到的余额对应显示到同行的Balance输入框中

一、解决Select2事件多次触发的问题 #

事件重复触发的根源是每次新增行时都给所有.select2_el重复绑定了事件监听，导致旧元素上叠加了多份相同的事件回调。解决方式是改用事件委托，将事件绑定到表格的父容器（而非直接绑定到Select2元素），只需绑定一次即可自动监听动态新增的元素。

替换原有事件绑定代码为：

// 绑定到表格的父容器（示例中使用表格id为ledger-table的容器，可根据实际结构调整）
$('#ledger-table').on('select2:select', '.select2_el', function(e) {
    var ledgerId = $(this).val();
    console.log(ledgerId);
    // 后续获取余额的逻辑写在此处
});

核心原理：利用事件冒泡机制，父容器统一监听事件，只有实际触发事件的.select2_el元素会执行回调，从根本上避免重复绑定。

二、实现同行Balance输入框填充余额 #

在事件回调中，通过当前Select2元素定位到同行的Balance输入框，调用API获取余额后直接填充：

完整代码示例：

$('#ledger-table').on('select2:select', '.select2_el', function(e) {
    var $currentSelect = $(this);
    var ledgerId = $currentSelect.val();
    // 定位同行的Balance输入框（假设输入框类名为balance-input）
    var $balanceInput = $currentSelect.closest('tr').find('.balance-input');

    // 调用Laravel API获取对应Ledger的余额
    $.ajax({
        url: '/api/ledgers/' + ledgerId + '/balance', // 替换为你的实际API路由
        method: 'GET',
        success: function(response) {
            // 将返回的余额填充到同行输入框
            $balanceInput.val(response.balance);
        },
        error: function() {
            // 错误处理：清空输入框或提示用户
            $balanceInput.val('');
            alert('获取余额失败，请重试');
        }
    });
});

关键操作说明：

• 使用closest('tr')快速定位当前Select2所在的表格行
• 通过find('.balance-input')精准找到同行的余额输入框
• API请求成功后，将返回的余额值直接赋值给输入框

额外注意事项 #

• 动态新增行时，Select2的初始化代码仅需针对新创建的元素执行（例如新增行后，只初始化该行的.select2_el），避免重复初始化导致的异常
• 确保Laravel后端API路由正确定义，返回数据包含balance字段（可根据实际返回结构调整赋值逻辑）

内容的提问来源于stack exchange，提问作者Chandan A.