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

【问题标题】：jQueryUI - handling 'click'\'select' event of an already selected tabjQueryUI - 处理已选择选项卡的“单击”\“选择”事件
【发布时间】：2011-08-22 03:02:44
【问题描述】：

我有一个 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");

对任何案例有什么想法\建议？

谢谢，

【问题讨论】：

标签： javascript jquery-ui tabs jquery-ui-tabs

【解决方案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();
   }
});

【讨论】：