eventos pestañas jQuery UI

Question

Estoy intentando llamar a una función cuando se carga una ficha, pero parece que el evento nunca se dispara y no puedo averiguar lo que estoy haciendo mal.

<div id="tabs" style="padding-top:0px;margin-top:0px"> 
    <ul> 
    <li><a href="#tabs-scripting">Scripting</a></li> 
    <li><a href="#tabs-scripting-history">Scripting History</a></li> 
    <li><a href="#tabs-equipment">Equipment List</a></li> 
    <li><a href="#tabs-syslogs">Syslogs</a></li> 
    <li><a href="#tabs-visio">Visio</a></li> 
    <li><a href="#tabs-misc">Misc</a></li> 
    </ul> 

    <div id="tabs-visio"> 
    <img id="visio_topology" src="/Scripting/customer/7229_topology.png"> 
    <!-- Visio Tab div end --> 
    </div> 

JS:

$('#tabs').tabs({ 
    select: function(event, ui) { 
     window.location.hash = ui.tab.hash; 
    } 
    }); 

    $("#tabs-visio").tabs().bind("tabsload", function(event, ui) { 
    console.log('hello world'); 
    }); 

Usando Firebug nunca ver 'hola mundo'. Soy nuevo en jquery y sé que me falta algo fácil, simplemente no puedo entender qué.

Answer 1

un intento de inicialización tabs después de unirse a tabsload controlador de eventos. Prueba este

$("#tabs-visio").bind("tabsload", function(event, ui) { 
    console.log('hello world'); 
    }).tabs(); 

Answer 2

No estoy experimentado con jQuery UI aquí pero tenía un vistazo a su problema y esto es lo que encontré:

• Tabs eventos específicos se activan en el elemento #tabs.
• Evento tabsload se activa cuando la pestaña contiene una URL externa. En ese caso, el contenido se carga utilizando AJAX y cuando la solicitud AJAX es exitosa, se activa el evento tabsload.
• En caso de URLs locales o en caché sólo tabselect y tabshow eventos se desencadenan. Entonces deberías usar uno de esos eventos.

Corrígeme si me equivoco pero parece que quieres cargar algún tipo de imagen grande cuando se selecciona la pestaña. En su ejemplo, la img se cargará justo cuando se cargue la página. Si desea cargar la imagen con pereza a continuación, intente esto:

$('#tabs').tabs({ 
    select: function(event, ui) { 
     // if "Visio" tab is selected and the image is not in DOM ... 
     if(ui.index === 4 && $("#visio-topology").length === 0) { 
     // ... append it to the div 
     $("#tabs-visio").append($("<img>", { 
      id: 'visio-topology', 
      src: '/Scripting/customer/7229_topology.png' })); 
     }    
    } 
}); 

HERE se puede experimentar con los acontecimientos y ver las diferencias.

Answer 3

¿Es realmente la totalidad de su HTML? Si es así, te está faltando una etiqueta de cierre en el div #tabs. La etiqueta de cierre al final de su fragmento de HTML está cerrando el div # tab-visio. HTML no válido (si realmente lo es) puede alterar jquery.