No añade elemento mediante append

Hola, tengo un script que según lo que selecciones en un <select> te carga en un <div> unas imágenes. Los datos los obtengo mediante JSON y luego creo los elemento y los añado al contenedor. Funciona unas veces y otras no. Siempre recibo los datos e incluso se crean los elementos pero al hacer el append lo añade cuando le da la gana.

$.getJSON('ruta', function (data) {
  var contenedor = $('#contenedorImages');
  var imagenes = [];
 
  $.each(data, function (i, value) {
    var newDiv= $('<div/>');
    newDiv.append('<img src="' + value['url'] + '" data-id="' + value['id'] + '">');
    imagenes.push(newDiv);
  });
 
  contenedor.append(imagenes);
});

Si imprimo imágenes con console.log() las crea, y si imprimo contenedor no lo añade (como he dicho, unas veces si, otras no)

Un saludo

Respuestas

Cuando dices que añade los elementos cuando quiere, ¿te refieres a que algunos elementos los añade siempre y otros nunca o a que un mismo elemento a veces se añade y otras veces no? En el primer caso, habría que mirar bien el contenido de las variables value['url'] y value['id']. En el segundo caso, no se me ocurre qué podría estar pasando.

En cualquier caso, ¿podrías probar a generar las imágenes mediante los métodos de jQuery en vez de concatenando cadenas de texto? Quizás de esta manera se produzca algún error al ejecutar algún método y tendremos más pistas sobre la causa del error:

$.getJSON('ruta', function (data) {
    var contenedor = $('#contenedorImages');
    var imagenes = [];
 
    $.each(data, function (i, value) {
        imagenes.push(
            $('<div>').append(
                $('<img>')
                    .attr('src', value['url'])
                    .attr('data-id', value['id'])
                ;
            );
        );
    });
 
    contenedor.append(imagenes);
});

@javiereguiluz

20 noviembre 2013, 12:03

Hola @javiereguiluz, cuando digo que carga cuando quiere es que unas veces funciona y al recargar o volver a entrar en esa sección no funciona. Cuando funciona da igual las veces que cambies el <select> que se cargan las imágenes en el <div>, pero cuando entras y no lo hace, da igual las veces que cambies el <select> que no lo muestra.

Como he dicho el navegador me descarga las imágenes pero no lo añade al contenedor, si imprimo el contenedor con contenedor.html() me devuelve el valor vacío y si lo miro en el DOM no tiene elementos.

He probado lo que me has dicho y sigue fallando pero no me da ningún error.

@AlbertoVioque

20 noviembre 2013, 12:40

Vale, ya se!!, Culpa mía, cómo no T.T

Justo antes de esa llamada a JSON tenía otra. Al cambiar el <select> borraba las imágenes que había en ese contenedor y después lo cargaba con AJAX. No me di cuenta y el reseteo del contenedor lo hacía dentro de otra llamada en AJAX justo antes de la llamada a las imágenes. Como cada una va a su ritmo, pues parece que se cargaban las imágenes antes que el otro AJAX y claro me lo borraba. T.T

¡muchas gracias!

@AlbertoVioque

20 noviembre 2013, 13:08