Question

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

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

Answer 1

如果有条件，则无需放置。

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

$('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>

Answer 2

如果您不想更改绑定的顺序来解决此问题，那么我建议您将绑定更改为委托。

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

更改绑定应首先处理元素上的直接绑定，这将调整活动类。然后，一旦事件膨胀到body元素，它将处理您的逻辑。

jQuery .on（'click'）在第一次单击时不起作用，但在第二次单击时起作用

2 个答案: