JQuery – 添加onclick以动态生成img标记
我使用以下代码动态创建多个图像：
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!"); } }); } 图像的生成工作正常，但我想在生成的第一个图像上添加onclick事件处理程序（请参阅代码中的注释）。 我该怎么做呢？ 我是JQuery的新手。
谢谢！
$(document.createElement("img")) .attr({ src: '/images/delete.gif', title: 'Delete ' + fotos[f].Title }) .addClass("icon_delete") .appendTo(galleryidentifier) .click(function(){ // Do something })
jQuery有一个名为click的方法，其参数是一个回调函数。 在这个例子中，我还将使用（更简单）的简写来创建图像元素：
$('![]()
').click(function () { // do something }).attr({ src: '/images/delete.gif', title: 'Delete ' + fotos[f].Title }).addClass("icon_delete").appendTo(galleryidentifier);
从jQuery 1.4开始，您可以创建一个元素，并在创建时添加所有atrributes /事件。
对于图像标记，您可以编写：
$('![]()
', { 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);
以上JSBin中的示例 。
这是对文档的引用 。
为什么它比使用jQuery创建图像的其他方式更好：
- 比链接十几种方法更清洁。
- 允许您发送具有不同属性的对象以进行创建。
- 与常规的html“硬编码”元素很好地匹配。
您可以使用click函数添加此类型的事件处理程序，方法与添加css类相同。
您可以使用addClass（）方法创建图像时创建一个类。 其他地方有类似的东西
$(document).ready( $("img.toBeClicked").click(function() { //some code }; };