Laravel: Click event on tab pane

Question

I have tables called: 1) purchase_requisitions; 2) liquidations. Assuming that I have 100 data for both purchase requisitions and liquidations.

In our application, we have all the lists of users and when the client clicked a certain user, there will be a modal that will pop-up.

In this modal you can see all the records for that user and also there's 2 tab. 1) Purchase Requisition tab; 2) Liquidations tab.

Purchase Requisition is the active tab once the client clicked the certain user and this is where I'm fetching the data of purchase requisitions.

Now what I want is, I dont want to load the 100 data of purchase requisitions and liquidations at the same time.

I want to load the liquidations, for example when I clicked the liquidations tab.

Question: Why does my click event is not working?

Tab pane

<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

You're targeting "div" in your jQuery click code, but you want to target your a elements, you should also add classes or ids to this elements which you will be targeting.

Add ids to your a elements

<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>

and in your javascript:

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