單擊/激活jQuery UI選項卡時觸發函數？

Question

我正在使用jQuery選項卡，並通過AJAX調用檢索其中一個選項卡中的內容。 但是我不想在單擊選項卡（激活）之前觸發調用，因為用戶可能不一定要單擊它。 最好的方法是什么？

jQuery UI為選項卡提供了select和show事件，但是當選擇或顯示任何選項卡時，這些事件都會觸發，而不僅僅是特定選項卡（據我所知）。

我還嘗試將click事件分配給特定選項卡的ID：

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

但這似乎沒有任何影響，呼叫永遠不會被觸發。

Answer 1

勾選的解決方案不再起作用，因為jquery-ui已經改變 。 您還需要在整個選項卡集上調用選項卡功能，而不僅僅是一個選項卡。 並且ui.index需要被替換。 如果第二個面板的ID為“tab2”，那么您可以使用：

$("#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 。

參考

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 。 這個SO問題有很多例子： jQuery UI選項卡獲取當前選定的選項卡索引

然后，在檢查選項卡的index ，可以執行ajax調用。

編輯：您在官方Jquery UI文檔中也有很多示例： http ： //docs.jquery.com/UI/Tabs