2012-02-25 10 views
5

Tengo una página en la que estoy usando jQuery UI Tabs, lo que estoy haciendo es cargar el contenido de cada pestaña a través de Ajax, pero el problema que tengo es que, en el contenido de mis pestañas, los botones (estoy usando jQuery ui button) pierden todas sus clases jQuery UI, lo que significa:conservar clases de elementos jquery-ui después de jquery .load()

Cuando se carga la página por primera vez, los botones de mi aspecto:

<button class="my_button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"> 
<span class="ui-button-icon-primary ui-icon ui-icon-plusthick"></span> 
</button> 

Como puede ver, mis botones tienen todas las clases de jquery-ui ui-button, ui-widget, etc.... Además, mis botones tienen un lapso que muestra un signo más (+) como una etiqueta para mis botones. Por lo tanto, mis botones se muestran correctamente.

Pero cuando cargo el mismo contenido (que contiene los mismos botones) a través de Ajax, los botones de mi ser como este:

<button class="my_button"></button> 

Como se puede ver, pierden todas las clases de interfaz de usuario jQuery de mi botón. Por lo tanto, el botón no tiene el estilo

¿Cómo puedo solucionar esto?

NOTA: Tenga en cuenta que no agregué manualmente esas clases jquery-ui a mis botones en mi HTML. Cuando inicializa los botones usando $(".my_button").button(); en jQuery, jQuery aplica automáticamente todas las clases necesarias de jquery-ui a mi botón. Entonces, por favor no me digan que es porque no asigné las clases de jquery-ui a mis botones por adelantado (no debería tener que hacerlo). Además, probé .live(), .delegate(), ninguno de esos funciona.

favor me ayude con esto a nadie

Gracias

+0

No estoy seguro, pero una vez que he enfrentado este problema y lo resolvió con la forma en que lo respondí. –

Respuesta

4

me he enfrentado a este problema de una vez resuelto este problema mediante la llamada document.ready como

function myreadyFunc(){ 
    $(".my_button").button(); 
    // Other codes 
} 

tenía mi documento. listo como el siguiente

$(document).ready(function(){ 
    myreadyFunc(); 
}); 

Después de cada llamada ajax (éxito) utilicé para llamar a

myreadyFunc(); 

Espero que esto te ayude también. Usé este enfoque para ejecutar el código de document.ready que no fue posible al llamar al documento. Listo después de cada llamada ajax.

+0

¿Pone el 'myreadyFunc()' fuera del '$ (document) .ready()'? Porque acabo de probar esto y no funciona – user765368

+0

Sí, debería colocar myreadyFunc() fuera de $ (document) .ready() –

+0

Entonces, en otras palabras, coloca todo el código contenido en su '$ (documento). ready() 'inside' myreadyFunc() '? y llamar a 'myreadyFunc()' dentro de '$ (document) .ready()' Y después de cada llamada de Ajax? – user765368