Avec les onglets de jQuery UI, comment puis-je exécuter du code après un clic sur un onglet ?

Question

Avec Onglets jQuery UI vous pouvez utiliser la méthode select pour exécuter du code lorsque vous cliquez sur un onglet :

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

Mais le code est exécuté avant que l'onglet qui vient d'être cliqué ne soit chargé. J'ai besoin d'exécuter le code après que le nouvel onglet ait été chargé. Comment puis-je faire cela ? Merci de votre lecture.

Answer 1

L'API A CHANGÉ. Cet événement est maintenant "activate"/"tasbactivate" ; voir http://api.jqueryui.com/tabs/#event-activate

----- OLD Réponse ci-dessous -----------

D'après la question, c'est l'événement tabsshow (et non tabsload) qui est souhaité... l'événement est déclenché lorsqu'un onglet est affiché.

Exemples de code : ( de http://jqueryui.com/demos/tabs/ )

Fournir une fonction de rappel pour gérer l'événement show comme une option init.

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

Lié à l'événement show par le type : tabsshow.

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

Cet événement est utile si vous voulez mettre le focus sur un contrôle ou autre.

Answer 2

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

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

Answer 3

On dirait que vous pourriez vous lier à tabsload ou tabsshow :

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

exemple

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

Answer 4

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!");
});