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 
    });
})