jquery - 以编程方式选择jquery ui选项卡时如何调用tabselect事件

Question

我正在使用 jQuery UI 选项卡，并且我有一个 tabselect 事件，我使用 api 加载 json 并生成选项卡的内容：

$('#tabs').bind('tabsselect', function(event, ui) {
  if (ui.panel.id == "tab1") {
    $.getJSON(...)
    //load content of tab here
  }
}

我还使用历史插件进行选项卡链接：

$.address.change(function(event){
  $("#tabs").tabs( "select" , hash );
}

因此，如果用户转到 mypage#tab1，则 tab1 会自动加载。问题是 tabselect 事件没有被触发，所以内容没有加载。

我确保所有这些都是在文档加载后发生的。如果我手动转到一个选项卡，那么它工作正常，只是在使用 tabs("select", ...);

是否有一些我必须启用的选项，以便以编程方式选择选项卡而不是单击它来触发正常事件？

score 4 · Accepted Answer

根据选择的文档：

选择一个选项卡，就像单击它一样。

这实际上确实调用了tabselect事件处理程序，正如您在此示例中看到的那样：

有趣的是，如果以编程方式选择了一个已经处于活动状态的选项卡，它不会触发（在示例中，如果您以tab-1编程方式选择它不会触发事件处理程序）。这可能是问题吗？或者可能hash包含错误的内容（即您使用的历史插件有问题）？

抱歉，我无法给出明确的答案，但希望这能帮助您找出问题所在。

score 3 · Accepted Answer

尝试挂钩到 show 事件。这对我有用，因为当我开始缓存选项卡状态时，我遇到了同样的问题。

$( ".selector" ).bind( "tabsshow", function(event, ui) {
  ...
});

2 回答 2