1

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.

4
  • Algún error en la consola? Commented el 27 feb. 2017 a las 17:22
  • Nada, todo bien en la consola. Todo el código dentro del ready y onload se ejecuta correctamente, lo malo es que, como comentan, parece ser que mi código se ejecuta antes de que en el DOM tenga esa clase ese div o posiblemente incluso antes de que se cree el div. Commented el 27 feb. 2017 a las 17:24
  • Ok.. entiendo que el elemento no esta creado aún... como se crea o de donde viene ese elemento? Commented el 27 feb. 2017 a las 17:29
  • Se crea con una clase llamada ui-checkbox por lo que seguro viene de las librerías de jQuery. Al final opté por usar un delay para retrasar la función que ya tengo establecida arriba. Commented el 27 feb. 2017 a las 17:40

2 respuestas 2

1

Utilizar un delay funcionó. No recomiendo hacer esto pero pues si por el momento no queda de otra no es mala opción.

$(document).ready(function(){
    setTimeout(quitarDiv, 1000);
});

var quitarDiv = function(){
    $(".ui-checkbox").css("display","inline").removeClass("ui-checkbox");
}
0

Puede que parezca un poco enrevesado, pero la manera correcta de hacer esto es añadir un MutationObserver al elemento body. (O a una etiqueta que te conste que exista cuando ejecutas la remoción de la clase ui-checkbox).

Declaras el MutationObserver y luego usas el método observe pasándole el body como primer parámetro. Eso lo mantendrá detectando cada vez que un nodo se agregue al body, y verificará si cada nodo agregado tiene el ID que estás buscando.

var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes) {
                for (var i = 0; i < mutation.addedNodes.length; ++i) {
                    var addedNode = mutation.addedNodes[i];
                    if ($(addedNode).is("#div_ofertar_id")) {
                        console.log('added node', $("#div_ofertar_id"));
                    }
                }

            }
        });
    });

observer.observe(document.body, {
		childList: true,
		subtree: true,
		attributes: false,
		characterData: false
});

$('#agrega_div').on('click',function() {
  $('<div id="div_ofertar_id">soy el div ofertar id</div>').appendTo('body');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="agrega_div">Agregar div #div_ofertar_id</button>

Más allá de eso, poner un delay/timeout no es 100% seguro porque en realidad no tienes manera de saber si el delay adecuado son 1000ms o 10000ms.

2
  • Supones que cache la creación del div que encierra el input y cuando el nodo sea igual a ese ejecutar mi línea de código para quitarle la clase, y agregarle mi css? if ($(addedNode).is(".ui-checkbox")) { //console.log('added node', $("#div_ofertar_id")); $(".ui-checkbox").css("display","inline").removeClass("ui-checkbox"); } Commented el 27 feb. 2017 a las 22:29
  • Exactamente. Y eso funcionaría para todos nos nodos insertados luego del observer, pero falta la lógica para modificar los ya existentes.
    – ffflabs
    Commented el 28 feb. 2017 a las 1:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.