提问人：Peter 提问时间：5/15/2009 更新时间：4/25/2012 访问量：72784
JQuery - 将 onclick 添加到动态生成的 img 标签中
JQuery - Add onclick to dynamically generated img tag
问：
我正在使用以下代码动态创建多个图像：
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 还很陌生。
谢谢！
答：
1赞
Paul Morie
5/15/2009
#1
您可以使用 click 函数添加此类型的事件处理程序，其方式与添加 css 类的方式相同。
1赞
Boris Guéry
5/15/2009
#2
在使用 addClass（） 方法创建图像时，您可以创建一个类。 其他地方有类似的东西
$(document).ready(
$("img.toBeClicked").click(function() {
//some code
};
};
10赞
Andrew Noyes
5/15/2009
#3
jQuery有一个名为click的方法，其参数是一个回调函数。在此示例中，我还将使用（更）简单的简写来创建图像元素：
$('<img/>').click(function () {
// do something
}).attr({
src: '/images/delete.gif',
title: 'Delete ' + fotos[f].Title
}).addClass("icon_delete").appendTo(galleryidentifier);
16赞
Nadia Alramli
5/15/2009
#4
$(document.createElement("img"))
.attr({ src: '/images/delete.gif', title: 'Delete ' + fotos[f].Title })
.addClass("icon_delete")
.appendTo(galleryidentifier)
.click(function(){
// Do something
})
6赞
hitautodestruct
4/25/2012
#5
从 jQuery 1.4 开始，您可以创建一个元素并在创建时向其添加所有 atrributes/事件。
对于图像标签，您可以这样写：
$('<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);
上面的 JSBin 示例。
这是对文档的引用。
为什么它比其他使用 jQuery 创建图像的方法更好：
- 比链接十几种方法要干净得多。
- 允许您发送具有不同属性的对象以创建。
- 与常规的html“硬编码”元素很好地匹配。
评论
0赞
Peter
4/26/2012
这看起来确实很整洁！
0赞
hitautodestruct
8/13/2012
@pankysharma 这只是常规的 javascript 对象表示法。JSON 基于此表示法模型。
2赞
Rahly
3/13/2013
实际上，JavaScript Object Notation = JSON，它不是基于它，而是它。您可能指的是 javascript 结构表示法，其中包括函数实现。Javascript 对象表示法不允许包含代码。
评论