JQuery - Evento CLICK funciona con elementos creados dinámicamente

   
Vista:

Evento CLICK funciona con elementos creados dinámicamente

Publicado por Gilberto tkratoxs@gmail.com (1 intervención) el 29/04/2012 08:13:55
Hola,

El evento CLICK no me funciona con elementos que creo a partir de funciones append de jQuery.

Lo que hago es hacer un GET con $.ajax a un script de PHP, el script hace una consulta a una Base de Datos y me regresa un conjunto de registros en formato JSON, estos registros los leo con una función en javascript y voy creando la lista dinámicamente y a cada elemento <div> dentro de un <li> le asigno una clase, la lista se crea bien pero el problema ocurre cuando hago click en un elemento, ya que no pasa nada y debería estar pasando algo ya que tengo un evento click asociado a esa clase.

Alguna idea de lo q este pasando, si se detectan los eventos con elementos creados a partir de append´s?

Muchas gracias.


Mi código de JS es mas o menos así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function resultsGrupo(data){
				$.each(data,function(index,value) {
					prod_text.push(data[index].grupo);
					prod_colors.push(data[index].color);
					prod_imgs.push("cgi-bin/"+data[index].icono);
					prod_ids.push(data[index].idgrupo);
				});
 
			}
 
			function construyeProdIn(){
				for(var i=1; i<prod_imgs.length+1; i++){
 
						$("#productos #ul_1").append('<li class="img_cuadro" id="li_prod_'+i+'">'+
												  '<img src="'+prod_imgs[i-1]+'" />'+
												  '<div class="link_prod" style="background:'+prod_colors[i-1]+'"><span>'+prod_text[i-1]+'</span></div>'+
												  '</li>'
						);
					
				}
				var aux = $("#productos ul").contents().clone();
				$("#productos ul").append(aux);
				
				
				$("#ajaxLoadP").hide();
				$("#ul_1").show();
			}
			
			function obtenGrupos(){
				$.ajax({
					data: "funcion=1",
					type: "GET",
					url: "controllet.php",
					dataType: "json",
					success: function(data){
						resultsGrupo(data);
						construyeProdIn();
					},
					error: function(xhr, textStatus, errorThrown){
						alert("ERROR AJAX "+ errorThrown);
					}
				});
			}

			$(document).ready(function(){
						
				obtenGrupos();

				//EVENTO CLICK
				$(".link_prod").click(function(){
				           alert("HOLA");
				 });

			});
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Evento CLICK funciona con elementos creados dinámicamente

Publicado por xve (557 intervenciones) el 29/04/2012 10:24:20
Hola Gilberto, no soy un experto en el tema, pero me he topado con este problema en casi cualquier web que he realizado con contenido dinámico.
Por lo que yo interpreto, jquery se ejecuta sobre el DOM actual, por eso existe la función ready(), para cargar las funciones una vez se ha cargado el DOM de la pagina.

Para ello, la soluciona que nosotros utilizamos es que cada vez que se llena el contenido de manera dinámica, dentro de la función $.ajax, indicamos todos los eventos que puede necesitar ese contenido (siempre una vez mostrado el contenido).

algo así:
1
2
3
4
5
6
7
$.post("file.php", {"parameter":value}, function(data) {
    $("#data").html(data.content);
 
    $("#data .class1").click(function() {
        if(tmpTemplate!=1)
    });
},"json");

De tal manera, que cada vez que se actualiza el contenido, se recargan las funciones

Espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Evento CLICK funciona con elementos creados dinámicamente

Publicado por Jaume (1 intervención) el 19/07/2012 00:09:52
Hola Gilberto, quizá ya tengas solucionado el tema pero jquery dispone de la funcion .live() que sirve para los elementos actuales del DOM y los que se crearán posteriormente. Ejemplo:

$('div.pepe').live('click' , function(){
$('div.pepe').html('<p>Hola que tal</p>');
});

Según este ejemplo si tu creas dinamicamente un div con class="pepe" al hacerle click debe mostrar el paragrafo con el texto "Hola que tal"
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar