Comunidad de diseño web y desarrollo en internet online

como manipular con each elementos cargados dinamicamente

Citar            
MensajeEscrito el 28 Feb 2012 03:38 pm
Hola uso jquery 1.6.4, y uso la funcion live para usar contenido que cargo dinamicamente, mi duda es la siguiente.

Cuando en el codigo normal tienes una coleccion de la misma clase usas each para tratar igual a cada elemento
pero cuando cargo con ajax y tengo que usar el live como se hace para tratar asi a los elementos??

Por rod00x3

Claber

595 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 01 Mar 2012 02:33 pm
Perdona mi torpeza pero no entiendo muy bien la pregunta.

La funcion live() de jQuery sólo maneja eventos, que yo sepa no manipula elementos u objetos, sólo les añade eventos, de la misma manera que la función die() elimina los eventos.

¿Cuál es el tipo de manipulación que le quieres hacer a los objetos dinámicos? y si son el mismo tipo de elemento, ¿por qué no te vale la función each()?,

Un saludo.

Por Abducted

Claber

489 de clabLevel

3 tutoriales

Genero:Masculino  

Mentalidad Renovada

chrome
Citar            
MensajeEscrito el 01 Mar 2012 03:27 pm
ok, ves que cuando cargas dinamicamente con ajax, los elementos cargados no estan en el DOM
de echo si esos elementos no los mandas a llamar con live,delegate, u on, no puedes aplicarle eventos como click, etc.

mi duda es si por ejemplo cargaste 30 div's con una clase llamada "imagen", como puedes usar todos dentro de una misma declaracion...
Lo normal es que si en mi pagina tengo 20 div="opcion" yo con javascript coloco:
$("opcion").each(function(i){
//aqui puedo controlar todos los eventos para los 20 divs. ejemplo
$(this).click(function(){
if(i==18){alert("dieron click al elemento 18")}
}
});
como poder hacer algo como esto en una carga dinamica de codigo html??

Por rod00x3

Claber

595 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 01 Mar 2012 04:18 pm
Seguro que hay alguna manera mejor de hacerlo que como lo hago yo, a través de la función eq(), o de alguna otra manera, que si alguien la explicara le estaría eternamente agradecido, pero yo lo suelo hacer así:

Código Javascript :

//Creo las imagenes y les doy un atributo valor
for (x=0; x<20; x++) {
   $('body').append('<div class="imagen" valor="'+x+'" />');
}

// Al hacer click parseo el atributo valor y ya se que imagen he pulsado
$('div.imagen').click(function () {
   var numero = parseInt($(this).attr('valor'));
   
   // Ahora uso el número como quiera
   if (numero >= 0 && numero < 20) {
      alert('HOOOORAY');
   }
});
Espero te sirva,
Un saludo.

Por Abducted

Claber

489 de clabLevel

3 tutoriales

Genero:Masculino  

Mentalidad Renovada

chrome
Citar            
MensajeEscrito el 01 Mar 2012 05:35 pm
Mira la solucion más correcta, es esta:

Código Javascript :

//Creo las imagenes
for (x=0; x<20; x++) {
   $('body').append('<div class="imagen" />');
}

// Al hacer click pregunto por su indice
$('div.imagen').click(function () {
   var numero = $('div.imagen').index(this);
   
   // Ahora uso el número como quiera
   if (numero >= 0 && numero < 20) {
      alert('HOOOORAY');
   }
});
A partir de ahora lo haré así, la verdad es que siempre lo he hecho de la otra manera por vago y no buscar un poco.

Un saludo.

Por Abducted

Claber

489 de clabLevel

3 tutoriales

Genero:Masculino  

Mentalidad Renovada

chrome
Citar            
MensajeEscrito el 01 Mar 2012 05:43 pm
Hello i am looking for software developers, if you know anyone please tell them to send me an e-mail at [email protected]

Por Itexico

1 de clabLevel



 

msie
Citar            
MensajeEscrito el 02 Mar 2012 03:27 pm
Pero el append si mal no me equivoco, no es lo mismo que cargar contenido con $post
mi duda es enfocada basicamente a ello.

Como tratar en conjunto elementos cargados dinamicamente.

Por rod00x3

Claber

595 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 03 Mar 2012 03:09 am
El POST es sólo para obtener del o enviar al servidor datos. append() inserta contenido al final del objeto seleccionado, ya sea contenido obtenido por GET, POST o escrito por ti directamente en el javascript o... lo que quieras.

append('algun contenido') viene a ser lo mismo en jQuery que por ejemplo html('algun contenido'), salvando la diferencia de que html() va a borrar todo el contenido del objeto seleccionado y append() lo va a respetar e insertar el contenido detrás.

http://w3schools.com/jquery/html_append.asp

Espero te sirva,
un saludo.

Por Abducted

Claber

489 de clabLevel

3 tutoriales

Genero:Masculino  

Mentalidad Renovada

chrome
Citar            
MensajeEscrito el 05 Mar 2012 03:14 pm
ok ok, de echo practicamente nunca havia usado el append, me confundi, pense que considerabas el append como carga dinamica, y si en efecto tu codigo es correcto cuando escribes manualmente el contenido, pero que se puede hacer cuando ni tu mismo sabes la cantidad de divs de una misma clase que se cargaran atra ves de un post... como manipulas esto??

Por rod00x3

Claber

595 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 05 Mar 2012 03:38 pm
Con bucles

Por Abducted

Claber

489 de clabLevel

3 tutoriales

Genero:Masculino  

Mentalidad Renovada

chrome
Citar            
MensajeEscrito el 05 Mar 2012 07:39 pm
no creo que se pueda hacer haci, ya que desconoces la cantidad de elementos cargados, y un bucle nesecita saber cuando acabar,y aqui la mayor complicacion que encuentro es poder aplicarle eventos a todos los elementos. Para que me entiendas, antes que nada hablo de elementos cargados dinamicamente con jquery $post, y me refiero a poder manipularlo con each, como si fuera codigo natural. Prueba primero bajo estas condiciones, para que no pongamos tantos post, y quienes en el futuro tengan esta duda encuentren la solucion rapido

Por rod00x3

Claber

595 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 05 Mar 2012 08:13 pm
algo así debería funcionar para contenido dinámico:

Código Javascript :

$("a.offsite").live("click", function(){ 
   $('.cualquier cosa').each(function{
         // Acciones a ejecutar
})

); }); 


Corrígeme si me equivoco.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 05 Mar 2012 08:15 pm
Me parece que lo que tienes es un cacao terrible, si usas un bucle for dentro de un resultado de datos no te hace falta saber cuantos elementos hay para poder desarrollar los resultados del bucle, o si usas un length para obtener la cantidad de resultados, ya sabes cuantos resultados has de tratar y puedes montar un bucle normal.

Repásate bien las cosas, es un consejillo.

Yo también me lo he de aplicar no te creas que no.

Si esperas hasta mañana estoy haciendo un tutorial bastante completo donde toco bucles for para tratar un número indeterminado de datos que recibo dinámicamente a la hora de generar un slider.

Un saludo.

Por Abducted

Claber

489 de clabLevel

3 tutoriales

Genero:Masculino  

Mentalidad Renovada

chrome
Citar            
MensajeEscrito el 05 Mar 2012 08:47 pm

HtrMancera escribió:

algo así debería funcionar para contenido dinámico:

Código Javascript :

$("a.offsite").live("click", function(){ 
   $('.cualquier cosa').each(function{
         // Acciones a ejecutar
})

); }); 


Corrígeme si me equivoco.


mmmm creo que estas mas cerca de lo que nesecito, pero lo que quiero poder hacer es lo siguiente, tomare tu ejemplo para explicarme mejor, y esperemos a mañana para checar el tutorial de nuestro buen amigo y asi dar solucion a esto.

Código Javascript :

$(".boton").live("click", function(){ 
   $(this).each(function(i){
         $(this).click(function(i){
               alert(i)
         }
})

); }); 

Con esto me refiero a tratar los elementos cargados dinamicamente con each.
En teoria, deveria detectar cuando das click a alguna clase ".boton" cargada dinamicamente
y desplegar a cual aparicion de ".boton" se le dio click.

Por rod00x3

Claber

595 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 05 Mar 2012 09:05 pm

Abducted escribió:

Código Javascript :

//Creo las imagenes
for (x=0; x<20; x++) {
   $('body').append('<div class="imagen" />');
}

// Al hacer click pregunto por su indice
$('div.imagen').click(function () {
   var numero = $('div.imagen').index(this);
   
   // Ahora uso el número como quiera
   if (numero >= 0 && numero < 20) {
      alert('HOOOORAY');
   }
});
.
Eso ya te lo dije yo, y como te he puesto funciona aunque lo cambies por el método live

Código Javascript :

$('div.imagen').live('click', function () {
   var numero = $('div.imagen').index(this);

   if (numero == 18) {
      alert('dieciochoooooooo');
   }
});

Tú problema, por lo que puedo imaginar, es que no sabes como tratar los resultados que recibes de la consulta o de lo que quierase que obtengas, por lo que yo creo que lo mejor que podías hacer es decirnos que tipo de datos obtienes y de donde y te explicamos como tratarlos con bucles y crear elementos con ellos que tengan eventos del mouse. Por que tanto las respuestas que te he dado al inicio como la que te acaban de dar son válidas para lo que planteabas en un principio, el problema es que, el problema estaba mal enfocado me da a mí.

Un saludo.

Por Abducted

Claber

489 de clabLevel

3 tutoriales

Genero:Masculino  

Mentalidad Renovada

chrome
Citar            
MensajeEscrito el 06 Mar 2012 01:32 am
Ya he creado un tuto en el que explico como pensar y crear un slider en jQuery, os dejo el link:

Tutorial Slider jQuery

Espero que te sea útil,
Un saludo.

Por Abducted

Claber

489 de clabLevel

3 tutoriales

Genero:Masculino  

Mentalidad Renovada

chrome
Citar            
MensajeEscrito el 06 Mar 2012 03:21 pm
Cierto no me avia percatado de esta linea en uno de los post que pusiste

var numero = $('div.imagen').index(this);

Voy a checarlo mañanita porque ahorita estoy enfermo, pero gracias y gracias por el tuto.

Por rod00x3

Claber

595 de clabLevel



Genero:Masculino  

msie

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.