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

Posted 2023-05-08

【中文标题】Laravel：选项卡窗格上的单击事件

【英文标题】：Laravel: Click event on tab pane

【发布时间】：2021-12-07 08:42:41

【问题描述】：

我有名为：1）purchase_requisitions 的表； 2) 清算。假设我有 100 条采购申请和清算数据。

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

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

Purchase Requisition 是客户端单击特定用户后的活动选项卡，这是我获取采购申请数据的地方。

现在我想要的是，我不想同时加载采购申请和清算的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');
    // 
)

【问题讨论】：

这些选择器在页面中的什么位置：$('.purchases-payments')、$('.liquidations')？您需要指定更多$('div')，因为有很多div s

小贴士：逐步使用console.log(something)

【参考方案1】：

您在您的 jQuery 点击代码中定位“div”，但您想要定位您的 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 
    );
)

【讨论】：

是的，我也注意到了。我已经这样做了，但现在，我的标签不起作用。了。我检查了控制台，没有错误

为什么你的标签不起作用，你还做了什么改变？我假设您删除了 href 属性。选项卡需要它才能正常工作。