当 jQuery UI 选项卡被点击/激活时触发一个函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11457498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger a function when a jQuery UI tab is clicked/made active?
提问by daGUY
I'm using jQuery tabs and the content in one of the tabs is retrieved via an AJAX call. But I don't want to trigger the call until the tab is clicked (made active) because the user might not necessarily click it. What's the best way to do this?
我正在使用 jQuery 选项卡，并且通过 AJAX 调用检索其中一个选项卡中的内容。但是我不想在单击选项卡（激活）之前触发调用，因为用户可能不一定单击它。做到这一点的最佳方法是什么？
jQuery UI provides selectand showevents for the tabs, but these fire when anytab is selected or shown, not just a specific one (as far as I know).
jQuery UI提供select和show选项卡的事件，但选择或显示任何选项卡时，这些火灾不仅仅是一个特定的选项卡（据我所知）。
I've also tried assigning a clickevent to the specific tab's ID:
我还尝试将click事件分配给特定选项卡的 ID：
$("#my-tab").click(function(){
...
$.post(URL, function(data){
...
});
...
}
But this seemingly has no effect and the call is never triggered.
但这似乎没有效果，并且永远不会触发调用。
回答by user3483642
The ticked solution doesn't work any more because jquery-ui has changed. Also you need to call the tabs function on the entire tab-set, not just one tab. And ui.index needs to be replaced. If the 2nd panel has the id "tab2" then you can use:
勾选的解决方案不再起作用，因为jquery-ui 已更改。您还需要在整个选项卡集上调用选项卡功能，而不仅仅是一个选项卡。并且需要替换ui.index。如果第二个面板的 id 为“tab2”，那么您可以使用：
$("#tabs").tabs({
activate: function(event, ui) {
if (ui.newPanel.selector == "#tab2") {
alert("tab 2 selected");
}
}
});
回答by Ricardo Alvaro Lohmann
回答by Engineer
You may try something like this:
你可以尝试这样的事情：
/*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')
});
回答by Sashenka
The selectevent has a uiparameter where you can check the indexof the selected tab. This SO question has many examples:
jQuery UI Tabs Get Currently Selected Tab Index
该select事件有一个ui参数，您可以在其中检查index所选选项卡的。这个 SO 问题有很多例子：
jQuery UI Tabs Get Current Selected Tab Index
You can then do the ajax call when you have checked the indexof the tab.
当您检查index选项卡的时，您可以执行 ajax 调用。
EDIT: You also have many examples in the official Jquery UI doc here: http://docs.jquery.com/UI/Tabs
编辑：您在此处的官方 Jquery UI 文档中也有许多示例：http: //docs.jquery.com/UI/Tabs
