Caso raro con innerHTML

[patilanz]

Hola quiero imprimir con javascript con innerHTML el siguiente codigo html :

Código HTML:

<div id="content">
        <div class="slider">
            <div class="sliderContent">
                <div class="item">
                    <img src="snimki/1.jpg" alt="" />
                   
                </div>
                <div class="item">
                    <img src="snimki/2.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="snimki/3.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="snimki/4.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="snimki/5.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="snimki/6.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="snimki/7.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="snimki/8.jpg" alt="" />
                </div>
            </div>
        </div>
        
    </div>
 

Este codigo esta programado con query para que las imagenes cambian al dar click en unos botones y funciona bien si lo pongo normal en la pagina escrito con html pero si intento poner lo con javascript con innerHTML me sale simplemente una imagen :

Código Javascript:

document.getElementById('contenido').innerHTML += '<div id="content"><div class="slider"><div class="sliderContent"><div class="item"><img src="snimki/1.jpg" alt="" /></div><div class="item"><img src="snimki/2.jpg" alt="" /></div><div class="item"><img src="snimki/3.jpg" alt="" /></div><div class="item"><img src="snimki/4.jpg" alt="" /></div><div class="item"><img src="snimki/5.jpg" alt="" /></div><div class="item"><img src="snimki/6.jpg" alt="" /></div> <div class="item"><img src="snimki/7.jpg" alt="" /></div><div class="item"><img src="snimki/8.jpg" alt="" /></div></div></div></div>'
 

Porque pasa esto???

Gracias :)

[3nr1c]

Me ha pasado a mí también alguna vez. Esto pasa porque cuando creas un evento en jQuery, se asigna a los elementos HTML que hay actualmente en la página. Esto también pasa si cargas elementos con AJAX, por ejemplo.

Solucionarlo no es fácil, te lo pongo con un ejemplo:

Código Javascript:

$(function(){
  var funcion = function(e){
    e.preventDefault();
  };
 
  $('a').bind( 'click', funcion );
 
  $('body').append( 
    $(document.createElement('a')).text('Hola mundo!') 
  );
 
  $('a').unbind('click');
 
  $('a').bind('click',funcion);
 
});
 

Un saludo

[patilanz]

Iniciado por 3nr1c

Me ha pasado a mí también alguna vez. Esto pasa porque cuando creas un evento en jQuery, se asigna a los elementos HTML que hay actualmente en la página. Esto también pasa si cargas elementos con AJAX, por ejemplo.

Solucionarlo no es fácil, te lo pongo con un ejemplo:

Código Javascript:

$(function(){
  var funcion = function(e){
    e.preventDefault();
  };
 
  $('a').bind( 'click', funcion );
 
  $('body').append( 
    $(document.createElement('a')).text('Hola mundo!') 
  );
 
  $('a').unbind('click');
 
  $('a').bind('click',funcion);
 
});
 

Un saludo

Hola gracias por tu respuesta pero yo todabia no se como usar ajax...

Pero si te a pasado a ti como lo solucionaste??

Gracias :)

[3nr1c]

Olvida el AJAX... puede que te liara un poco.

Lo que he intentado explicarte es que cuando enlazas un evento a un elemento, solo lo enlazas a los elementos actuales, existentes, con el selector que has usado. Y si añades nuevos elementos que coincidan con ese selector, no tendrán el evento enlazado, pues se han creado después y jQuery no lo sabe.

Así que, para solucionarlo, haz lo siguiente:
1.- Supongo que tienes una función algo tal que así:

Código Javascript:

$('algo').click(function(){...});
 

Copia la función y la pones en una variable:

Código Javascript:

var fn = function(){
  codigo de la funcion;
};
 

2.- Dentro de la llamada al evento pones 'fn':

Código Javascript:

$('algo').click(fn);
 

3.- Cuando crees un nuevo elemento, ejecutas esto (cambia el 'algo' por tu selector ):

Código Javascript:

$('algo').unbind('click');
$('algo').click(fn);
 

Debería funcionarte

[patilanz]

Gracias por tu respuesta pero esq en el codigo query todo esta en una linea y todo es
Y luego en el codigo html no tiene evento simplemente divs con ids.
El query lo copie de aqui:
[URL="http://a1javascripts.com/?p=703"]http://a1javascripts.com/?p=703[/URL]

Son 3 archivos js. Pero creo que el que me dices es este:

Código Javascript:

$(function(){
    
    $('.slider').mobilyslider({
        content: '.sliderContent',
        children: 'div',
        transition: 'fade',
        animationSpeed: 800,
        autoplay: true,
        autoplaySpeed: 3000,
        pauseOnHover: true,
        bullets: false,
        arrows: true,
        arrowsHide: true,
        prev: 'prev',
        next: 'next',
        animationStart: function(){},
        animationComplete: function(){}
    });
    
});
 

Solo lo he cambiado un poco para que se me adapte a mi pagina.

Muchas gracias por tus respuestas y perdon si me pongo pesado con no saber bien de lo que me hablas

Un saludo :)

[3nr1c]

Creo que ya sé como puedes solucionar tu problema. Citando el codigo que pusiste en el primer mensaje:

Código Javascript:

document.getElementById('contenido').innerHTML += '<div id="content"><div class="slider"><div class="sliderContent"><div class="item"><img src="snimki/1.jpg" alt="" /></div><div class="item"><img src="snimki/2.jpg" alt="" /></div><div class="item"><img src="snimki/3.jpg" alt="" /></div><div class="item"><img src="snimki/4.jpg" alt="" /></div><div class="item"><img src="snimki/5.jpg" alt="" /></div><div class="item"><img src="snimki/6.jpg" alt="" /></div> <div class="item"><img src="snimki/7.jpg" alt="" /></div><div class="item"><img src="snimki/8.jpg" alt="" /></div></div></div></div>'
 

Cámbialo por:

Código Javascript:

$('#contenido').append( '<div id="content"><div class="slider"><div class="sliderContent"><div class="item"><img src="snimki/1.jpg" alt="" /></div><div class="item"><img src="snimki/2.jpg" alt="" /></div><div class="item"><img src="snimki/3.jpg" alt="" /></div><div class="item"><img src="snimki/4.jpg" alt="" /></div><div class="item"><img src="snimki/5.jpg" alt="" /></div><div class="item"><img src="snimki/6.jpg" alt="" /></div> <div class="item"><img src="snimki/7.jpg" alt="" /></div><div class="item"><img src="snimki/8.jpg" alt="" /></div></div></div></div>')
 

Con esto, estás añadiendo contenido usando jQuery, puede que te funcione...

Y tranquilo, todos hemos sido 'inexpertos' alguna vez

[Dradi7]

Bueno

Primero no veo el uso indispensable de jQuery para algo tan simple como se esta explicando aqui.

Segundo el uso de bind y/o ubind ya ha sido deprecado por el mismo jQuery por la gran cantdad de errores que este mismo generaba en su caso por favor usar el evento on o el delegate, el live no me acuerdo si ya esta deprecado

[3nr1c]

Si es indispensable, porque esta usando un plugin que es un slider...
http://a1javascripts.com/?p=703

[Dradi7]

Iniciado por 3nr1c

Si es indispensable, porque esta usando un plugin que es un slider...
http://a1javascripts.com/?p=703

3nr1c

El que el haya puesto como name class slider no quiere decir que debemos usar jQuery, ademas el no menciona en ningún lado que esta usando jQuery la cual deberia aclarar en un principio y por lo contrario uno no debe depender de jQuery siempre por mas tranca que sea algo debemos tratar de hacerlo sin necesidad de usar framework y existen tantos ejemplos en la web que pueden ayudar.

Saludos

[patilanz]

Gracias por vuestras respuestas :)

Yo si estoy usando query porque no se como hacer lo sin el :(

Al usar esto:

Código Javascript:

$('#contenido').append( '<div id="content"><div class="slider"><div class="sliderContent"><div class="item"><img src="snimki/1.jpg" alt="" /></div><div class="item"><img src="snimki/2.jpg" alt="" /></div><div class="item"><img src="snimki/3.jpg" alt="" /></div><div class="item"><img src="snimki/4.jpg" alt="" /></div><div class="item"><img src="snimki/5.jpg" alt="" /></div><div class="item"><img src="snimki/6.jpg" alt="" /></div> <div class="item"><img src="snimki/7.jpg" alt="" /></div><div class="item"><img src="snimki/8.jpg" alt="" /></div></div></div></div>')
 

Tampoco me funciono :(

Yo muestro esto con un intervalo de esta manera :

Código Javascript:

setTimeout(function() {
        $('#contenido').append( '<div id="content"><div class="slider"><div class="sliderContent"><div class="item"><img src="snimki/1.jpg" alt="" /></div><div class="item"><img src="snimki/2.jpg" alt="" /></div><div class="item"><img src="snimki/3.jpg" alt="" /></div><div class="item"><img src="snimki/4.jpg" alt="" /></div><div class="item"><img src="snimki/5.jpg" alt="" /></div><div class="item"><img src="snimki/6.jpg" alt="" /></div> <div class="item"><img src="snimki/7.jpg" alt="" /></div><div class="item"><img src="snimki/8.jpg" alt="" /></div></div></div></div>')},texto.length * 40)
 

Puede ser que por esto no me funciona??

Gracias :)

[patilanz]

Iniciado por 3nr1c

Creo que ya sé como puedes solucionar tu problema. Citando el codigo que pusiste en el primer mensaje:

Código Javascript:

document.getElementById('contenido').innerHTML += '<div id="content"><div class="slider"><div class="sliderContent"><div class="item"><img src="snimki/1.jpg" alt="" /></div><div class="item"><img src="snimki/2.jpg" alt="" /></div><div class="item"><img src="snimki/3.jpg" alt="" /></div><div class="item"><img src="snimki/4.jpg" alt="" /></div><div class="item"><img src="snimki/5.jpg" alt="" /></div><div class="item"><img src="snimki/6.jpg" alt="" /></div> <div class="item"><img src="snimki/7.jpg" alt="" /></div><div class="item"><img src="snimki/8.jpg" alt="" /></div></div></div></div>'
 

Cámbialo por:

Código Javascript:

$('#contenido').append( '<div id="content"><div class="slider"><div class="sliderContent"><div class="item"><img src="snimki/1.jpg" alt="" /></div><div class="item"><img src="snimki/2.jpg" alt="" /></div><div class="item"><img src="snimki/3.jpg" alt="" /></div><div class="item"><img src="snimki/4.jpg" alt="" /></div><div class="item"><img src="snimki/5.jpg" alt="" /></div><div class="item"><img src="snimki/6.jpg" alt="" /></div> <div class="item"><img src="snimki/7.jpg" alt="" /></div><div class="item"><img src="snimki/8.jpg" alt="" /></div></div></div></div>')
 

Con esto, estás añadiendo contenido usando jQuery, puede que te funcione...

Y tranquilo, todos hemos sido 'inexpertos' alguna vez

Pls sabes otro método porque este no me funciona

Un saludo

[patilanz]

Hola, ya lo solucione haciendo una capa oculta y cuando necesitaba que aparesca con innerHTML simplemente muestro la capa.

Gracias por vuestras respuestas :)