Evento CLICK funciona con elementos creados dinámicamente
Publicado por Gilberto (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í:
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
0
