jQuery - Añadir onclick a generado dinámicamente etiqueta img

Question

estoy creando varias imágenes de forma dinámica mediante el siguiente código:

function refresh_gallery(galleryidentifier, albumid) { 
    $.ajax({ type: "POST", url: "/Photos/Thumbnails/" + albumid + "/", data: {}, success: function(msg) { 
     try { 
      var fotos = eval(msg); $(galleryidentifier).empty(); if (fotos.length == 0) { $(galleryidentifier).html("Press "Add files..." and select files to upload!"); return true; } 
      for (var f in fotos) { 
       //this image needs the onclick eventhandler 
       $(document.createElement("img")).attr({ src: '/images/delete.gif', title: 'Delete ' + fotos[f].Title }).addClass("icon_delete").appendTo(galleryidentifier); ; 
       $(document.createElement("img")).attr({ src: fotos[f].ThumbnailPath, title: fotos[f].Title }).addClass("thumbnail").appendTo(galleryidentifier); 
      } 
      var del_div = $(document.createElement("div")).css({ "padding": "4px" }).appendTo(galleryidentifier); 
      var delete_span = $(document.createElement("span")).click(delete_files(albumid)).css({ "cursor": "pointer", "font-size": "12px" }).appendTo(del_div); 
      $(document.createElement("img")).attr({ "src": "/Content/images/delete.png" }).appendTo(delete_span); 
      $(document.createTextNode("delete all")).appendTo(delete_span); 
      return true; 
     } 
     catch (e) { 
      alert(e); 
     } 
     alert("Refresh error!"); 
    }, error: function() { alert("Refresh error!"); } 
    }); 
} 

La generación de las imágenes está trabajando muy bien, pero quiero añadir un manejador de sucesos onclick a la primera imagen que se genera (ver comentario en el código). ¿Cómo hago esto? Soy bastante nuevo en JQuery.

Gracias!

Answer 1

$(document.createElement("img")) 
    .attr({ src: '/images/delete.gif', title: 'Delete ' + fotos[f].Title }) 
    .addClass("icon_delete") 
    .appendTo(galleryidentifier) 
    .click(function(){ 
     // Do something 
    }) 

Answer 2

Puede agregar un controlador de eventos de este tipo utilizando la función click de la misma forma que agregó la clase css.

Answer 3

puede crear una clase al crear su imagen con el método addClass(). Y en otro lugar tienen algo así como

$(document).ready(
    $("img.toBeClicked").click(function() { 
    //some code 
    }; 
}; 

Answer 4

jQuery tiene un método llamado clic, el argumento de que es una función de devolución de llamada. En este ejemplo, yo también voy a usar un (mucho) más simple taquigrafía para la creación de un elemento de imagen:

$('<img/>').click(function() { 
    // do something 
}).attr({ 
    src: '/images/delete.gif', 
    title: 'Delete ' + fotos[f].Title 
}).addClass("icon_delete").appendTo(galleryidentifier); 

Answer 5

Desde jQuery 1.4 puede crear un elemento y añadir todos Atrributes/eventos a ella al crear

En el caso de una etiqueta de imagen que iba a escribir:

$('<img/>', { 
    src:  '/images/delete.gif', 
    title: 'Delete ' + fotos[f].Title, 
    'class': 'icon_delete', // in quotes because class is a reserved js word 
    click: function(e){ 
     // Everything here happens when you click the image. 
    } 
}).appendTo(galleryidentifier); 

Por encima de example en JSBin.

Aquí está el reference a los documentos.

¿Por qué es mejor que las otras formas de crear una imagen usando jQuery:

• mucho más limpio que el encadenamiento de una docena de métodos.
• Le permite enviar objetos con diferentes propiedades para crear.
• Coincide muy bien con un elemento html "codificado" regular.