Question

我正在使用jQuery标签，其中一个标签中的内容是通过AJAX调用检索的。但是我不想在单击选项卡（激活）之前触发调用，因为用户可能不一定要单击它。最好的方法是什么？

jQuery UI为标签提供select和show个事件，但是当选择或显示任何标签时，这些事件都会触发，而不仅仅是特定标签（就我而言）知道）。

我还尝试将click事件分配给特定标签的ID：

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

但这似乎没有任何影响，呼叫永远不会被触发。

Answer 1

勾选的解决方案不再适用，因为jquery-ui has changed。您还需要在整个选项卡集上调用选项卡功能，而不仅仅是一个选项卡。并且ui.index需要被替换。如果第二个面板有id＆＃34; tab2＆＃34;然后你可以使用：

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

Answer 2

Ui-tabs提供了一个选择标签时触发的功能。

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

注意使用activate获取新版本。

reference

Answer 3

您可以尝试这样的事情：

/*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')
});

Answer 4

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

您可以在选中标签index后执行ajax调用。

编辑：您在官方Jquery UI文档中也有很多示例：http://docs.jquery.com/UI/Tabs

单击/激活jQuery UI选项卡时触发函数？

4 个答案: