Question

我有一个带有两个标签的jQuery Mobile Navbar：

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

Answer 1

恕我直言click完全可以达到此目的，您可以简单地使用变量来跟踪活动标签。这是jsFiddle

Answer 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

});

Answer 3

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

jQuery Mobile Navbar：获取活动选项卡

3 个答案: