como obtener rl primer elemento del objeto

xalupeao · #1 (**permalink**) 26/02/2011, 17:15

Bueno tengo un pregunta si tengo esto.

<img src="imagen1.jpg" id="ft1" class="foto" />
<img src="imagen2.jpg" id="ft2" class="foto" />
<img src="imagen3.jpg" id="ft3" class="foto" />

y ahora quiero obtener el id del primero al hacerle click.

EJ:

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

me devuelte 3 alert uno por cada elemento con class foto

como puedo obtener solo 1 (es decir el id del elemento al cual se ha hecho click).

nota: no hack el evento click con el id ya que el id es generado por en tiempo de ejecucion.

gracias :)

masterpuppet · #2 (**permalink**) 26/02/2011, 17:50

Que tal xalupeao, el codigo que mostras deberia hacer lo que necesitas, podes mostrar el codigo completo ?.

Saludos.

xalupeao · #3 (**permalink**) 27/02/2011, 02:05

estimado te explico con detalle, desde ya gracias :).

bueno mi caso real es esto, estoy subiendo una imagen por medio de un iframe... y luego creo un div que contiene la imagen subida. te doy el codigo.

Código Javascript:

Ver original$("#fotosPreview").append('<div class="tiradefoto" id="foto_' + imgs + '"> <img src="imagenes/tmp/' + $(this).contents().text() + '" alt="imagen" title="Borrar" /><br />Borrar</div>');

ahora mi idea el obtener la id de esos div creados.

Código Javascript:

Ver original$(".tiradefoto").click(function(){
                var img = $(this).attr("id");
                alert(img);
            });

pero sencillamente no me responde... ahora si dejo el codigo de arriba dentro de la funcion que crea el div, funciona pero me da un alert por cada imagen que se alla creado.

Si me puedes ayudar por msn o algo asi seria genial.

:)

xalupeao · #4 (**permalink**) 27/02/2011, 02:15

te doy ejemplo completo.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
    $("#capas").data("ids",1);
    $("#crearcapa").click(function(e){
        e.preventDefault();
        var ids = $("#capas").data("ids");
        //creamos la capa
        $("#capas").append('<div class="capa" id="capa_' + ids + '">Esto es la capa numero: ' + ids + '</div>');
        $("#capas").data("ids",ids + 1);
    });
    $(".capa").click(function(){
        alert($(this).attr("id"));
    });
});
</script>
</head>
 
<body>
<div id="capas">
    
</div>
<input id="crearcapa" type="button"  value="crear capa" />
</body>
</html>

como te puedes dar cuenta no da el alert.

------------

ahora si lo dejas asi.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
    $("#capas").data("ids",1);
    $("#crearcapa").click(function(e){
        e.preventDefault();
        var ids = $("#capas").data("ids");
        //creamos la capa
        $("#capas").append('<div class="capa" id="capa_' + ids + '">Esto es la capa numero: ' + ids + '</div>');
        $("#capas").data("ids",ids + 1);
        
        $(".capa").click(function(){
            alert($(this).attr("id"));
        });
    });
});
</script>
</head>
 
<body>
<div id="capas">
    
</div>
<input id="crearcapa" type="button"  value="crear capa" />
</body>
</html>

funciona ... pero si te das cuenta pasa que lanza un alert por cada capa....

desde ya muchas gracias.

enrique4480 · #5 (**permalink**) 27/02/2011, 03:48

como pones en el primer codigo pero usando live te funcionara bien.

xalupeao · #6 (**permalink**) 28/02/2011, 00:26

muchas gracias :)