当点击/激活jQuery UI选项卡时触发一个函数？

Question

我正在使用jQuery选项卡，其中一个选项卡中的内容是通过AJAX调用检索的。但我不想触发调用，直到单击该选项卡（使其活动），因为用户可能不一定会单击它。最佳方法是什么？

jQuery UI为选项卡提供了“select”和“show”事件，但这些事件在选择或显示任何选项卡时触发，而不仅限于特定选项卡（据我所知）。

我还尝试将click事件分配给特定选项卡的ID：

$("#my-tab").click(function(){
...
     $.post(URL, function(data){
          ...
     });
...
}

但是这似乎没有任何效果，调用从未被触发。

- daGUY

Answer 1

勾选的解决方案不再有效，因为jquery-ui已经改变。您需要在整个选项卡集上调用选项卡函数，而不仅仅是一个选项卡。并且需要替换ui.index。如果第二个面板的ID为“tab2”，则可以使用：

$("#tabs").tabs({
    activate: function(event, ui) {
       if (ui.newPanel.selector == "#tab2") {
            alert("tab 2 selected");
       }
    }
});

- user3483642

Answer 2

Ui-tabs提供了一个功能，当你选择一个选项卡时会触发该功能。

$( ".yourTab" ).tabs({
   select: function(event, ui) {
        if(ui.index == myTabIndex) {
            $.post(URL, function(data){
              ...
            });
        }
   }
});

注意：对于新版本，请使用activate。

参考资料

- Ricardo Alvaro Lohmann

---

运行得非常完美！我之前不知道如何只针对特定的标签使用select。谢谢！ - daGUY

@RicardoAlvaroLohmann 这个很好用，但是我在文档中没有看到 select: object，之前我就是在那里找的。 - Popo

@Popo 我认为它已被替换为“activate”。 - Ricardo Alvaro Lohmann

Answer 3

select事件有一个ui参数，您可以检查所选标签的index。这个SO问题有很多例子： jQuery UI Tabs Get Currently Selected Tab Index

当您检查了标签的index后，就可以进行ajax调用。

编辑：您还可以在官方Jquery UI文档中找到许多示例：http://docs.jquery.com/UI/Tabs

- Sashenka

Answer 4

您可以尝试类似这样的方法：

/*tab placeholder*/.tabs({
    select: function(event, ui) {
       if(ui.item.id === "my-tab"){
           //explicitly trigger mouse click on tab
           $(ui.item).trigger('click');
       }
    }
});
//------------------
$("#my-tab").click(function(){
    alert('something')
});

- Engineer