Tengo un html:
<table>
<tr>
<td colspan="3">
<input type="checkbox" id="aceptarTerminos"><a href="#" id="terminos">Acepto Términos y Condiciones de Uso</a>
</td>
</tr>
</table>
Cuando ejecuto el código por alguna razón de alguna librería o el mismo struts las etiquetas me las crea así:
<table>
<tr>
<td colspan="3">
<div class="ui-checkbox">
<input type="checkbox" id="aceptarTerminos">
</div>
<a href="#" id="terminos" class="ui-link">Acepto Términos y Condiciones de Uso</a>
</td>
</tr>
</table>
O sea que se crea un DIV que encierra a mi input type checkbox. Eso hace que el diseño se vea feo, el checbox sale muy chico, se da un salto de línea y abajo sale el con lo de los términos y condiciones de uso. Así que para poder corregir eso hice esto:
$(document).ready(function(){
$(".ui-checkbox").css("display","inline").removeClass("ui-checkbox");
});
También lo intenté así:
$(document).ready(function(){
$("#div_ofertar_id").find(".ui-checkbox").css("display","inline").removeClass("ui-checkbox");
});
Eso funciona pero hasta que se recarga por segunda vez la página. O sea que la primera vez que se carga la página los cambios NO los toma pero sí que entra en esa parte pues si pongo un alert este sí sale al cargarse por primera vez, si presiono F5 ahora sí toma los cambios ahí. Lo único que se me ocurre es que la parte del código (que no sé dónde está) que hace que el input se encierre en un div se ejecute primero que mi código aunque eso no explica porqué la segunda vez sí se ejecuta.. ¿Alguien sabe a qué se debe esto?
Edit: Intenté con:
window.onload = function() {
$("#div_ofertar_id").find(".ui-checkbox").css("display","inline").removeClass("ui-checkbox");
//$(".ui-checkbox").css("display","inline").removeClass("ui-checkbox");
}
El resultado es el mismo. Sigue sin tomarme el cambio la primera vez que se recarga la página.