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

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

jQuery UI为选项卡提供select和show事件，但是当选择或显示任何选项卡时，这些事件都会触发，而不仅仅是特定选项卡（据我所知）。

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

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

但这似乎没有任何效果，并且呼叫永远不会被触发。

Answer 1

Ui-tabs提供了一个在选择选项卡时触发的function。

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

注意对新版本使用activate 。

参考

Answer 2

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

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

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