1

我有一个带有两个选项卡的 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>

单击选项卡时，我想

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

根据文档，活动选项卡有 class 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评估的时间。现在，在一些不相关的代码更改之后，它在桌面浏览器上和以前一样工作，但在移动浏览器上，我只是已经 active，无论单击哪个按钮 - 即if发生得太晚了。

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

编辑：

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

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

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

4

3 回答 3

1

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

于 2013-01-02T08:20:12.133 回答
0

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

$("#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

});
于 2013-10-03T19:02:44.290 回答
0

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

于 2014-05-07T05:18:13.800 回答