With jQuery UI tabs, how can I run code after a click on a tab?

Question

With jQuery UI tabs, you can use the select method to run code when a tab is clicked:

$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

But the code is run before the just clicked tab has been loaded. I need to run code after new tab has been loaded. How can I do this? Thanks for reading.

Darren · Answer 1 · 2014-06-23T03:24:22.717

12

API HAS CHANGED. This event is now "activate"/"tasbactivate"; see http://api.jqueryui.com/tabs/#event-activate

----- OLD Answer below -----------

Based on the question it's the tabsshow (not the tabsload) event that is desired...event is triggered when a tab is shown.

Code examples: ( from http://jqueryui.com/demos/tabs/ )

Supply a callback function to handle the show event as an init option.

$( ".selector" ).tabs({
   show: function(event, ui) { ... }
});

Bind to the show event by type: tabsshow.

$( ".selector" ).bind( "tabsshow", function(event, ui) {
  ...
});

The event is useful if you want to set focus on control or similar.

edited Jun 23 '14 at 03:24

answered Dec 22 '11 at 05:51

Darren

9,014
2
39
50

8

This event is now "activate"/"tasbactivate"; see http://api.jqueryui.com/tabs/#event-activate – Joel Peltonen Mar 01 '13 at 11:51
agreed on this answer... makes more sense for what the user is asking. – dah97765 Nov 05 '13 at 20:43
I just hate it that there is no event when you click on an active tab. It blocks the click calls but, gives you no event either – Hugo Delsing Jul 08 '15 at 11:11

score 7 · Accepted Answer · answered Nov 14 '10 at 03:10

7

$( ".selector" ).tabs({
   load: function(event, ui) { ... }
});

from http://jqueryui.com/demos/tabs/

answered Nov 14 '10 at 03:10

Cubed Eye

5,581
4
48
64

score 6 · Answer 3 · answered Nov 14 '10 at 03:13

6

looks like you could bind to tabsload or tabsshow:

http://jqueryui.com/demos/tabs/#Events

example

$('#example').bind('tabsshow', function(event, ui) { ... });

answered Nov 14 '10 at 03:13

JasonWoof

4,176
1
19
28

2

This event is now "activate"/"tasbactivate"; see http://api.jqueryui.com/tabs/#event-activate – Joel Peltonen Mar 01 '13 at 11:23
To be clear, you wouldn't use the bind() method: $( ".selector" ).tabs({ activate: function( event, ui ) { } }); – SetFreeByTruth Jan 09 '14 at 23:01

score 0 · Answer 4 · answered Oct 28 '20 at 21:25

HTML

<div id="tabs">
    <ul>
        <li><a href="#job_information_tab">Job Information</a></li>
    </ul>
    <div id="job_information_tab">
        [content]
    </div>
</div>

JS

$('a[href="#job_information_tab"]').on('click', function() {
   alert("Don't tickle me! I am gonna pee!");
});

With jQuery UI tabs, how can I run code after a click on a tab?

4 Answers4