jQuery UI 탭을 클릭/활성화 할 때 함수를 트리거 하시겠습니까?

Question

jQuery 탭을 사용 중이며 탭 중 하나의 내용이 AJAX 호출을 통해 검색됩니다. 그러나 사용자가 클릭하지 않을 수도 있기 때문에 탭을 클릭 할 때까지 (활성화 된) 호출을 트리거하고 싶지 않습니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

jQuery를 UI는 탭에 대한 select 및 show 이벤트를 제공하지만 어떤 탭을 선택하거나 표시됩니다 이러한 화재, 다만 특정 일 (내가 아는 한).

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

을 그러나 이것은 겉으로는 아무런 효과가 없으며 전화가 트리거되지 않습니다 :

또한 특정 탭의 ID에 click 이벤트를 할당 시도했습니다.

Answer 1

UI - 탭 탭을 선택하면 트리거 기능을 제공합니다.

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

주 새 버전에 대한 사용 activate.

reference

Answer 2

당신은 이런 식으로 뭔가를 시도 할 수 있습니다 :

/*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 3

select 이벤트는 선택한 탭의 index을 확인 할 수있는 ui 매개 변수가 있습니다. 이 질문에는 많은 예가 있습니다. jQuery UI Tabs Get Currently Selected Tab Index

그러면 탭의 index을 확인한 후 ajax 호출을 할 수 있습니다.

편집 : http://docs.jquery.com/UI/Tabs

Answer 4

가 쳤다 솔루션은 더 이상 jquery-ui has changed 때문에 작동하지 않습니다 : 당신은 여기 공식 JQuery와 UI의 문서에서 많은 예제가 있습니다. 또한 하나의 탭이 아닌 전체 탭 세트에서 탭 기능을 호출해야합니다. 그리고 ui.index를 교체해야합니다. 두 번째 패널의 ID가 'tab2'인 경우 다음을 사용할 수 있습니다.

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