Laravel：单击选项卡窗格上的事件

Question

我有一个表格叫：1）purchase_requisitions； 2) 清算。 假设我有 100 个采购申请和清算数据。

在我们的应用程序中，我们拥有所有用户列表，当客户端单击某个用户时，将弹出一个模式。

在此模式中，您可以看到该用户的所有记录，还有 2 个选项卡。 1) 采购申请标签； 2) 清算选项卡。

一旦客户单击某个用户，采购申请就是活动选项卡，这是我获取采购申请数据的地方。

现在我想要的是，我不想同时加载100条申购和清算数据。

我想加载清算，例如当我单击清算选项卡时。

问题：为什么我的点击事件不起作用？

标签窗格

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

Javascript

<script type="text/javascript">
function getPurchasesPayments(vendor_id,start_date,end_date){
    // .... code
}
$(document).ready(function(){
    var vendor_id                                          = "<?= $vendor->id; ?>";
    var start_date                                         = "<?= $start_date;?>";
    var end_date                                           = "<?= $end_date;?>";
    if ($('.purchases-payments').length > 0) {
        $('div').click('.purchases-payments',function(e){ 
        // $('.purchases-payments').click(function(e){ 
            $('.purchases-payments-details').html('');
            getPurchasesPayments(vendor_id,start_date,end_date);
            
            e.preventDefault();
            return false;
        })
    }

    if ($('.liquidations').length > 0) {
        $('div').click('.liquidations',function(e){
        // $('.liquidations').click(function(e){
            alert('test');
            
            e.preventDefault();
            return false;
        })
    }

    // if ($('.liquidations').hasClass('active')) {
    //     alert('liquidations active');
    // }
})

Answer 1

您在 jQuery 单击代码中定位“div”，但是您想定位a元素，您还应该向要定位a元素添加类或 id。

将 id 添加到您的a元素

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

并在您的 javascript 中：

$(document).ready(function(){
    $('#purchases').click(function(e){ 
        // your code 
    });
    $('#liquidations').click(function(e){ 
        // your code 
    });
})