Conocer id sabiendo class

[monicapo]

Tengo <div> de la siguiente forma:

Código:

<div id="detalles">
	<div id="1" class="fila">contenido</div>
	<div id="2" class="fila">contenido</div>
	<div id="3" class="fila">contenido</div>
</div>

...

Y me gustaría con jquery saber el id de la fila haciendo click encima. Y he hecho:

Código:

$('.fila').click(function() {
	console.log($('.fila').attr('id'));
});

Y también:

Código:

$('.fila').click(function() {
	console.log($('.fila').id);
});

En ambos casos el resultado es que en consola no me aparece nada.
¿Cómo puedo sabe el id de la fila?

Un saludo.

[MaNuX0218]

El primer metodo estaria casi bien, solo agrega $(this) para saber cual has echo clic y te dará el ID.

Código Javascript:

$(".fila").click(function(){
   alert($(this).attr("id"));
});
 

Saludos.

[monicapo]

Nada, es imposible. No me aparece nada
Os detallo más mi caso.

El bloque de filas lo genero en una llamada AJAX:

Código:

success: function(respuesta){
	var datos = eval('('+respuesta+')');
	for(var i in datos) {
		$("#contenedor").append("<div id='"+datos[i].id+"' class='fila'></div>");
		$("#"+datos[i].id).append(datos[i].nombre);
	}					
}

Con este código me genera:

Código:

<div id="contenedor">
	<div id="1" class="fila">NOMBRE1</div>
	<div id="2" class="fila">NOMBRE2</div>
</div>

Y el evento de .fila lo he cambiado por:

Código:

$(".fila").on("click", function(){
	console.log($(this).attr("id"));
});

He puesto "on" porque he leido que los eventos de elementos que no se han creado aún se propagan con "on" y ya funcionaría.

Pues no. No me sale nada en la consola.

He conseguido que me aparezca bien si meto "async:false" en la llamada AJAX. Y bueno, el resultado son filas que aparecen al instante y parece que sigue siendo asincrono.

¿Pero no hay forma de hacerlo con AJAX asincrono? ¿O qué hago mal?
Un saludo.

[monicapo]

Lo he conseguido de forma asincrona colocando el evento clic en el success de AJAX.
¿Es correcto hacerlo así o estoy haciendo una burrada?

[andresgarciadev]

si las filas fueron creadas dinamicamente apartir de ajax entonces la solucion deberia ser esta

Código Javascript:

$(document).on("click",".fila", function(){
       alert($(this).attr("id"));
    });
 

[monicapo]

Nada, no me hace nada.
Solo funciona el clic si meto la función en el success de AJAX.
Por un lado si solo quisiera hacer eso, pues lo dejo así, pero quiero ampliar la funcionalidad.

Quisiera hacer esto:

He metido varias imagenes en la fila.
Quisiera hacer eventos clic en cada imagen por separado, y como depende de la id de cada fila pues he hecho esto:

Código:

$(".fila").on("click", function(){
	$($(this).children("img")[0]).on("click", function(){
		alert("Vista 1");
	});
	$($(this).children("img")[1]).on("click", function(){
		alert("Vista 2");
	});
	$($(this).children("img")[2]).on("click", function(){
		alert("Vista 3");
	});
});

Pero claro esto está mal hecho. Porque genera eventos clic duplicados cada vez que pico en una de las imagenes.

A ver si me podéis ayudar, porque no me aclaro.
Si tengo:

Código:

<div id="1" class="fila">
	<img class="imgUno" src="imagenes/uno.png">
	<img class="imgDos" src="imagenes/dos.png">
	<img class="imgTres" src="imagenes/tres.png">
</div>
<div id="2" class="fila">
	<img class="imgUno" src="imagenes/uno.png">
	<img class="imgDos" src="imagenes/dos.png">
	<img class="imgTres" src="imagenes/tres.png">
</div>

¿Como pondría eventos clic en las tres imagenes, mostrando por ejemplo, un alert distinto? Estoy bastante perdido.

[monicapo]

No hay nada como beber un vaso de agua y despejarse.
Así lo hago y perfecto:

Código:

$(".imgUno").on("click", function(){
	alert($(this).parent().attr("id"));
});
$(".imgDos").on("click", function(){
	alert($(this).parent().attr("id"));
});
$(".imgTres").on("click", function(){
	alert($(this).parent().attr("id"));
});

Así, cada vez que hago clic en las imagenes de cada fila, tengo acceso a la id de la fila, y asi poder trabajar con ella.

Un saludo.