深入理解jQuery事件委托与Bootstrap Tab页动态内容加载

<ul class="nav nav-pills">
    <li class="nav-item" style="width: 10%">
        <a id="purchasesTab" class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
    </li>
    <li class="nav-item" style="width: 10%">
        <a id="liquidationsTab" class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
    </li>
</ul>

$(document).ready(function(){
    var vendor_id = "<?= $vendor->id; ?>";
    var start_date = "<?= $start_date;?>";
    var end_date = "<?= $end_date;?>";

    // 绑定“采购/付款”Tab的点击事件
    $('#purchasesTab').click(function(e){
        // 注意：通常情况下，如果希望Bootstrap处理Tab的视觉切换，
        // 则不需要在这里调用 e.preventDefault()。
        // 如果您希望完全手动控制Tab切换行为，则可以取消注释此行。
        // e.preventDefault();

        $('.purchases-payments-details').html(''); // 清空旧内容
        getPurchasesPayments(vendor_id, start_date, end_date); // 调用数据加载函数
    });

    // 绑定“清算”Tab的点击事件
    $('#liquidationsTab').click(function(e){
        // e.preventDefault();
        alert('Liquidations tab clicked!');
        // 这里可以调用加载清算数据的方法，例如：
        // getLiquidations(vendor_id, start_date, end_date);
    });
});

$(document).ready(function(){
    var vendor_id = "<?= $vendor->id; ?>";
    var start_date = "<?= $start_date;?>";
    var end_date = "<?= $end_date;?>";

    // 假设Modal的ID是 #userModal，或者使用 document 作为最外层委托对象
    // 选择一个尽可能靠近动态元素的、但自身是静态的父元素。
    // 如果整个页面都是动态的，$(document) 是最后的选择。
    $('#userModal').on('click', '#purchasesTab', function(e){
        // e.preventDefault();
        $('.purchases-payments-details').html('');
        getPurchasesPayments(vendor_id, start_date, end_date);
    });

    $('#userModal').on('click', '#liquidationsTab', function(e){
        // e.preventDefault();
        alert('Liquidations tab clicked via delegation!');
        // 调用加载清算数据的方法
        // getLiquidations(vendor_id, start_date, end_date);
    });
});

$(document).ready(function(){
    var vendor_id = "<?= $vendor->id; ?>";
    var start_date = "<?= $start_date;?>";
    var end_date = "<?= $end_date;?>";

    // 监听“采购/付款”Tab的显示事件
    // 注意：这里我们监听的是 a[data-toggle="pill"] 元素
    $('a[href="#purchases-payments-tab"]').on('shown.bs.tab', function (e) {
        // e.target 是当前激活的Tab的<a>元素
        // e.relatedTarget 是前一个激活的Tab的<a>元素
        console.log('Purchases/Payments Tab shown');
        $('.purchases-payments-details').html(''); // 清空旧内容
        getPurchasesPayments(vendor_id, start_date, end_date); // 加载数据
    });

    // 监听“清算”Tab的显示事件
    $('a[href="#liquidations-tab"]').on('shown.bs.tab', function (e) {
        console.log('Liquidations Tab shown');
        alert('Liquidations tab shown!');
        // 这里可以调用加载清算数据的方法，例如：
        // getLiquidations(vendor_id, start_date, end_date);
    });

    // 如果“采购/付款”是默认激活的Tab，确保其数据在页面加载时就加载。
    // 可以在 document.ready 中判断是否是active，然后手动触发一次加载。
    // 或者在 getPurchasesPayments 函数中添加逻辑判断是否已加载，避免重复加载。
    if ($('a[href="#purchases-payments-tab"]').hasClass('active')) {
        // 确保数据只加载一次，或者根据业务逻辑重新加载
        // 可以在 getPurchasesPayments 内部添加一个标志位
        // 或直接在这里调用一次，如果第一次加载逻辑不在 shown.bs.tab 里
        // getPurchasesPayments(vendor_id, start_date, end_date);
    }
});