JQuery - Aggiungi onclick al generati dinamicamente tag img

Question

sto creando diverse immagini in modo dinamico utilizzando il seguente codice:

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 generazione delle immagini sta lavorando bene, ma voglio aggiungere un EventHandler onclick al primo immagine generata (vedi commento nel codice). Come faccio a fare questo? Sono abbastanza nuovo per JQuery.

Grazie!

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

È possibile aggiungere un gestore di eventi di questo tipo utilizzando la funzione click allo stesso modo in cui è stata aggiunta la classe css.

Answer 3

Si può semplicemente creare un corso durante la creazione dell'immagine con il metodo addClass(). e altrove hanno qualcosa di simile

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

Answer 4

jQuery ha un metodo chiamato click, l'argomento a cui è una funzione di callback. In questo esempio, ho anche intenzione di usare una (molto) stenografia semplice per la creazione di un elemento di immagine:

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

Answer 5

Fin da jQuery 1.4 è possibile creare un elemento e aggiungere tutti atrributes/eventi ad esso quando si crea.

Nel caso di un tag di immagine si può scrivere:

$('<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); 

Sopra example in JSBin.

Ecco lo reference per i documenti.

Perché è meglio degli altri modi di creare un'immagine utilizzando jQuery:

• molto più pulito di concatenamento una dozzina di metodi.
• Consente di inviare oggetti con proprietà diverse da creare.
• Si abbina bene con un normale elemento "Hard coded" in html.