jQuery Mobile 导航栏：获取活动选项卡答案

【问题标题】：jQuery Mobile Navbar: get active tabjQuery Mobile 导航栏：获取活动选项卡
【发布时间】：2024-08-30 05:10:02
【问题描述】：

我有一个带有两个选项卡的 jQuery Mobile 导航栏：

<div data-role="navbar">
  <ul>
    <li><a href="#" class="tab ui-btn-active">Inbound</a></li>
    <li><a href="#" class="tab">Outbound</a></li>
  </ul>
</div>

当一个标签被点击时，我想

如果它已经是活动标签，则什么也不做，
如果单击的选项卡成为新的活动选项卡，请执行某些操作。

根据documentation，活动选项卡有类ui-btn-active，所以我监听点击并查看点击按钮上是否存在该类：

$('.tab').click(function() {

  if ( $(this).hasClass('ui-btn-active') ) {
    // already active, do nothing
    console.log("already active");
  } else {
    // newly active, do something
    console.log("newly active");
  }
});

这已经完美运行了几个月，但我现在看到它完全取决于活动类从一个类中删除并添加到另一个类的时间，相对于评估 if 的时间。现在，在一些不相关的代码更改之后，它在桌面浏览器上和以前一样工作，但在移动浏览器上，无论单击哪个按钮，我都只能已经激活 - 即if 发生得太晚了。

最聪明的方法是什么？有人可以解释事件的顺序，以及事件的顺序不一致是如何发生的吗？ click 是用于触摸屏设备的正确听众吗？

编辑：

我尝试使用.on() 监听父级上的冒泡事件并检查事件对象，希望它包含的类列表会更准确，但行为是相同的：

$('ul').on('click','a',function(event) {
  alert(event.currentTarget.classList.contains('ui-btn-active'));
});

单击非活动选项卡会在桌面浏览器上返回false，如希望的那样，在移动浏览器上返回true。

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

恕我直言click 非常适合此目的，您可以简单地使用变量来跟踪活动选项卡。这里是jsFiddle

【讨论】：

【解决方案2】：

我有同样的问题，我是这样解决的：

$("#myselector").on('click','a',function(event) {

   $("#myselector").find('a').each(function(i) { 
     $(this).removeClass('ui-btn-active');
   });
   $(this).addClass('ui-btn-active');

   //  call to my function

});

【讨论】：

【解决方案3】：

点击有 300 毫秒的延迟。尝试使用“点击”而不是“点击”

【讨论】：