Modificaciones sobre el DOM con jQuery

cerocool · 22 Jun 2014

Amigos, tengo un trabajo que hacer y no estoy seguro de estar en lo correcto, necesito hacer unas modificaciones sobre una pagina pero solo puedo crear nuevo CSS y jS pero no tocar lo que esta. Entonces por ejemplo estoy usando jQuery para algunas modificaciones:

$(document).ready(function() {
$( ".xxx-upload" ).empty();
$( ".xxx-upload" ).append( "add a photo" );
$( ".viewer-close" ).append( "<div class='newClose'>Close</div>" );
$( "#xxx-wall" ).find( ".item_wall").hover(
function() {
$( this ).append("<span>Shop Now</span>");
}, function() {
$( this ).find( "span:last" ).remove();
}
);
});

Mi punto es que como la pagina es dinámica, esas modificaciones no aparecen en los nuevos elementos que va cargando vía AJAX, supongo que es porque yo llamo a estas funciones solamente al cargar la pagina.

Como debería hacer para que estos cambios se apliquen sobre los nuevos elementos?

nullPointer · 23 Jun 2014

Yo extraería el contenido en una función y llamaría a dicha función cada vez se realiza una petición Ajax, para que así se le aplique lo que quieres a los nuevos elementos creados.

Te dejo un ejemplo no funcional, pero que explica lo que te quiero decir:

Insertar CODE, HTML o PHP:

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

    // Función que carga el contenido deseado.
    function loadData () {
        $( ".xxx-upload" ).empty();
        $( ".xxx-upload" ).append( "add a photo" );
        $( ".viewer-close" ).append( "<div class='newClose'>Close</div>" );
        $( "#xxx-wall" ).find( ".item_wall").hover(
            function() {
                $( this ).append("<span>Shop Now</span>");
            }, function() {
                $( this ).find( "span:last" ).remove();
            }
        );		
    }

    //supuesta petición ajax
    $.ajax({
        type : 'GET',
        dataType : 'json',
        url : 'unaURL.php',
        success : function(response) {
            //- Cargamos los nuevos elementos
            {{ TU CÓDIGO AQUÍ }}
            //- Llamamos a la funcion loadData
            loadData();
        },
        error : function() {						
            alert('error!');
        }        
    });

No sé si es eso lo que quieres. Si no lo es, podrías poner algo más de tu código para ver cuáles son tus intenciones.

Un saludo.

jcdiaz · 30 Jun 2014

Efectivamente, como lo menciona el compañero alla arriba, yo haria una función para llamarla cada ves que realice la petición o en el momento en que desee cargar la información.

Modificaciones sobre el DOM con jQuery

cerocool Seguir

nullPointer

jcdiaz