Error en evento click sobre capas generadas con AJAX

[monicapo]

Veamos, hace un tiempo hice una pregunta similar, pero ahora quiero reordenar funciones y parámetros y me encuentro con problemas. Os explico.

Tengo este código:

Código Javascript:

filas = function() {
    $.ajax({
        type: "POST",
        url: "generarFilas.php",
        success: function(respuesta){
            var datos = eval('('+respuesta+')');
            for(var i in datos) {
                $("#contenedor").append("<div id="+datos[i].id+" class='fila'></div>");
                $("#"+datos[i].idruta+".fila").on("click", detalles(datos[i]));
            }
        }
    });
}
 
detalles = function(datos) {
    console.log(datos);
}
 

Vamos, que lo que quiero es generar filas. Y luego un evento clic que al hacer clic en la fila se vean los detalles.

La fila se ve como se tiene que ver, y la función detalles hace lo que tiene que hacer, pero la función detalles se autoejecuta al cargar la página en vez de ejecutarse al hacer clic en la fila. No sé si está mal ubicado el evento clic o si tengo más errores.

¿Me podéis ayudar?
Un saludo.

[Alexis88]

Se ejecuta por la forma en la que la colocaste. Al ser una llamada de retorno y querer pasarle un argumento, lo correcto sería hacerlo de esta manera:

Código Javascript:

$("#"+datos[i].idruta+".fila").on("click", function(){
    detalles(datos[i])
});
 

Sin embargo, al ser contenido dinámico, lo más adecuado es que delegues el evento de la siguiente manera:

Código Javascript:

$("#contenedor").on("click", ".fila", function(){
    //Aquí ejecutas tus instrucciones
});
 

Obviamente, esto debe de ir fuera del bucle. Incluso puede ir por fuera del método $.ajax(). Noto también que usas la función eval(), la cual no se recomienda su uso por medidas de seguridad, razón por la cual te desaconsejo su uso.

Saludos

[monicapo]

Lo de eval lo uso para convertir el JSON, pero puedo acceder sin problemas sin usarlo. No lo sabía. Gracias. He estado mirando eso que pones y lo de delegar el evento clic, y funciona también. Gracias otra vez.

Otra cosa. Si tengo que sacar el evento click del for, ¿como paso datos[i] directamente? He hecho que en vez de pasar datos[i], con DOM y javascript capturo los elementos que me hacen falta y funciona, ¿pero no sería más comodo pasar los datos del for directamente a la función?

[Alexis88]

Hay muchas formas en las que puedes hacer el envío del argumento a la función.

Una de ellas consiste en establecer dicho valor en un atributo personalizado y luego tomarlo mediante el método .data(), el cual te sirve tanto para tomar como para establecer el valor.

Código Javascript:

//Para tomar el valor
$("identificador").data("atributo");
 
//Para establecer el valor
$("identificador").data("atributo", "valor");
 

Y en cuanto a lo que mencionas sobre convertir la respuesta al formato JSON, te bastaba con añadir el atributo dataType al método $.ajax() y asignarle el valor "json"; incluso tienes como opciones el uso de los métodos $.getJSON() y JSON.parse().

Saludos

[monicapo]

Interesante lo de .data. No lo conocía. Veo que se me escapan cosas de jQuery.

getJSON es para hacer llamadas con GET, y quiero hacerlo con POST. No e importa usar la función $.ajax

La respuesta del metodo success la formateo en PHP con JSON y al recibirla puedo acceder como respuesta.id en vez de respuesta["id"]. Por eso no pasa nada.

Voy a probar lo de data, a ver si puedo pasarlo como argumento de la función.

[Alexis88]

En ese caso, puedes usar el método $.parseJSON() o JSON.parse() o el atributo dataType, como te lo indiqué en la anterior respuesta, pero evitar usar la función eval(). No es seguro.

Saludos