2012-02-05 14 views
7

Estoy tratando de cargar imágenes dynamiaclly y mostrarlos como se muestra a continuaciónDetectar clic en una imagen

 var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader'); 
       uploader.bind('FileUploaded', function (up, file, res) { 
       $('#<%=thumbs.ClientId%>').append("<div id=" + file.id + "> 
       <a href='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/> 
       <img src='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' width='70' height='55' data-full='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/></div>"); 
    }); 

Ésta es mi marcado:

<div id="thumbs" class="imgContain" runat="server"> 
    </div> 

Si lo hago de esta manera en el div Da yo una alerta, pero no en la imagen, pero en el div:

$('.imgContain').click(function() { 
    alert('You Clicked Me'); 
    }); 

Y he intentado usar esta forma pero dosent dame cualquier ale rt ni siquiera en el div también.

$('.imgContain a').click(function() { 
     alert('You Clicked Me'); 
}); 

Entonces, ¿cómo puedo hacer esto?

+0

de acuerdo con su marcado no tiene un 'a' dentro de div con la clase' imgContain ' – Rafay

+0

Como se ve en el evento de enlace cargado arriba, puede encontrar el . – coder

+0

¿Está ejecutando $ ('. ImgContain a'). Click (... después de cargar las imágenes? – Daniel

Respuesta

10

se debe utilizar el método on

$('.imgContain').on("click","a,img", function (e) { 
     e.preventDefault(); 
     alert('You Clicked Me'); 
}); 
+0

@ Royi: ¡he intentado tanto con 'on' como con 'delegate', pero no funcionó! – coder

+0

@DotNetter espero que tengas jquery 1.7+ –

+0

@ Royi-¡Tienes razón! Estoy usando 1.7+. – coder

2

Para los anclajes <a> s que adjuntas, youwill necesidad de utilizar .live() el fin de unir a ella el evento de clic como:

$('.imgContain a').live("click", function (event) { 
     event.preventDefault(); 
     alert('You Clicked Me'); 
}); 
+0

por mnistake he editado (y revertido el tuyo) lo siento. –

+0

@ MGA-He intentado tanto con 'on' como con 'delegate' pero ninguno funcionó! – coder

+0

@ MGA-Disculpa, tuve un truco con mi código y funcionó bien :) – coder

4

¡Es es un poco difícil saber exactamente cómo es tu DOM, pero supongo que agregas las imágenes al div con la clase .imgContain. Si desea agregar un evento de clic a las imágenes que podría hacer algo como esto:

$('.imgContain').on("click", "img", function() { 
    alert('You Clicked Me'); 
}); 

Como creo que va a agregar las imágenes de forma dinámica, se debe utilizar el método .on() para enlazar el evento de clic, en lugar de utilizar .click().

Nota Si por alguna razón está utilizando una versión anterior de jQuery, que podría cambiar la .on() utilizar .live() lugar.

+0

Esto no sirve de ayuda ya que img no está en el dom. Deberías ver mi contestador. –

+0

@RoyiNamir Por supuesto su derecho, gracias! –

0

Learn function live in jQuery. y utilícelo en su código ...

jQuery versión 1.4.1 y superior.

ya que los elementos se colocan dinámicamente en el html después de cargar la página. La función de clic no está enlazada.

Cuestiones relacionadas