jQueryUI - 处理“单击”\“选择”已选择选项卡的事件

Question

我有一个 jQueryUI 选项卡对象，我想在已选择选项卡时处理单击选项卡的事件。
使用：

$("#tabs").tabs({
    select: function (event, ui) {
        onSelected();
    }
});

我能够在第一次单击（选择）选项卡时处理该事件，但是当我再次单击它时 - 不会调用处理程序。
有什么解决办法吗？

---

如果没有 - 另一个满足我需求的选项如下：
将选项卡定义为可折叠，并通过脚本折叠它们（而不是通过用户单击）。 我将选项卡对象定义为：

$("#tabs").tabs({
    collapsible: true
});

但是当我尝试使用以下命令模拟单击时：

$("#tabs").tabs("select", 0);

或者

$("#tab-link-0").trigger('click');

什么也没有发生。

我需要指出的是，选项卡是动态添加的，使用：

$("#tabs").tabs("add", "#tab-link-0", "title 0");

对于任何情况有任何想法\建议吗？

谢谢，

Answer 1

我进行了一些实验，发现可以通过在 select 处理程序中调用 event.preventDefault() 来防止选项卡折叠。显然，您只想在当前选定的选项卡上触发 select 处理程序时执行此操作（以防止折叠选项卡），否则您将永远无法切换选项卡。这是值得测试的，因为在 jQuery 事件上调用了 preventDefault()，但它似乎为您提供了您想要的行为，至少在 Chrome 中是这样：

var tabs = $("#tabs").tabs({
   collapsible: true,
   select: function(event, ui) {
      if (tabs.tabs('option', 'selected') === ui.index) {
         // Prevent the tab from collapsing if the event fired on the 
         // currently-selected tab
         event.preventDefault();
      }
      onSelected();
   }
});