单击/激活 jQuery UI 选项卡时触发函数?
Posted
技术标签:
【中文标题】单击/激活 jQuery UI 选项卡时触发函数?【英文标题】:Trigger a function when a jQuery UI tab is clicked/made active? 【发布时间】:2012-07-12 12:54:08 【问题描述】:我正在使用 jQuery 选项卡,其中一个选项卡中的内容是通过 AJAX 调用检索的。但是我不想在单击选项卡(激活)之前触发呼叫,因为用户可能不一定会单击它。最好的方法是什么?
jQuery UI提供@ 987654321和 我还尝试将 但这似乎没有任何效果,并且从未触发调用。show
987654322 show
事件的选项卡,但这些火灾当选择或显示任何 em>选项卡时,而不仅仅是一个特定于特定的(据我所知)。
click
事件分配给特定选项卡的 ID:$("#my-tab").click(function()
...
$.post(URL, function(data)
...
);
...
【问题讨论】:
【参考方案1】:勾选的解决方案不再起作用,因为jquery-ui has changed。您还需要在整个选项卡集上调用选项卡功能,而不仅仅是一个选项卡。需要更换 ui.index 。如果第二个面板的 id 为“tab2”,那么您可以使用:
$("#tabs").tabs(
activate: function(event, ui)
if (ui.newPanel.selector == "#tab2")
alert("tab 2 selected");
);
【讨论】:
【参考方案2】:Ui-tabs 提供了一个功能,当您选择一个选项卡时会触发该功能。
$( ".yourTab" ).tabs(
select: function(event, ui)
if(ui.index == myTabIndex)
$.post(URL, function(data)
...
);
);
注意新版本使用activate
。
reference
【讨论】:
完美运行!我不知道如何将select
仅用于特定选项卡。谢谢!
@RicardoAlvaroLohmann 这很好用,但我没有在文档中看到 select: 对象,在我找到它之前就在那儿。
@Popo 我想它已经被activate
取代了。【参考方案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')
);
【讨论】:
【参考方案4】:select
事件有一个ui
参数,您可以在其中检查所选选项卡的index
。这个 SO question 有很多例子:
jQuery UI Tabs Get Currently Selected Tab Index
当您检查了选项卡的index
后,您就可以进行 ajax 调用了。
编辑:您在官方 Jquery UI 文档中也有很多示例:http://docs.jquery.com/UI/Tabs
【讨论】:
以上是关于单击/激活 jQuery UI 选项卡时触发函数?的主要内容,如果未能解决你的问题,请参考以下文章