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

时间:2011-02-04 02:22:03

标签: jquery jquery-ui jquery-plugins jquery-ui-tabs browser-history

我正在使用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事件未被触发,因此内容不会加载。

我确保所有这些都在文档加载后发生。如果我手动转到选项卡,那么它可以正常工作,而不是在使用选项卡时(“选择”,...);

我是否需要启用某些选项以便以编程方式选择选项卡而不是单击它来触发正常事件?

2 个答案:

答案 0 :(得分:4)

根据选择的文件:

  

选择一个标签,就像点击它一样。

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

http://jsfiddle.net/andrewwhitaker/UsnNu/1/

有趣的是,如果以编程方式选择已经激活的选项卡,则不会触发(在此示例中,如果以编程方式选择tab-1,则不会触发事件处理程序)。这可能是问题吗?或者hash可能包含错误的内容(即您正在使用的历史插件存在问题)?

抱歉,我无法提供明确的答案,但希望这会帮助您找出问题所在。

答案 1 :(得分:3)

尝试连接到show事件。这对我有用,因为当我开始缓存标签状态时,我遇到了同样的问题。

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

此处提供更多信息:http://jqueryui.com/demos/tabs/#event-show