时间戳

首页 > 解决方案 > jQuery .on('click') 在第一次点击时不起作用，但在第二次点击时不起作用

jquery - jQuery .on('click') 在第一次点击时不起作用，但在第二次点击时不起作用

问题描述

我有 6 个选项卡，只有一个选项卡处于活动状态。当我单击任何其他时，单击的选项卡会变为活动类。我有一项任务是从选定的选项卡中获取价值，该选项卡在被单击后获得活动类。问题是我的.on('click')方法仅在我第二次单击该选项卡后才向我显示带有活动类的选项卡。这是我的代码：

$('div[data-toggle="tab"]').on('click', function(){
    if($(this).hasClass('active')){
        var activeTemplateID = $('.active-template-id.text-danger').data('template-id');
        console.log(activeTemplateID);
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="2" data-toggle="tab" href="#tab1" 
      role="tab" aria-controls="nav-home" 
      aria-selected="true" 
      class="align-items-end nav-item nav-link  letter pl-0 pr-0 nav-home-tab" 
      style="display: grid;">
 </div>

第一次单击后，我想获得选定选项卡的类。我做错了什么？

标签： jquery

解决方案

你不需要把 if 条件。

它应该在没有 if 条件的情况下工作！因为单击已经使选项卡处于活动状态！您可以以正常方式获取它的数据！

$('div[data-toggle="tab"]').on('click', function(){
   setTimeout(function(){  
        var activeTemplateID = $('.active-template-id.text-danger').data('template-id');
        console.log(activeTemplateID); 
    }, 500);


})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读