Question

我使用以下代码动态创建多个图像：

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 &quot;Add files...&quot; 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很新。

谢谢！

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

jQuery有一个名为click的方法，其参数是一个回调函数。在这个例子中，我还将使用（更简单）的简写来创建图像元素：

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

Answer 3

自从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中的example以上。

以下是文档的reference。

为什么它比使用jQuery创建图像的其他方式更好：

比连接十几种方法更清洁。
允许您发送要创建的具有不同属性的对象。
与常规html“硬编码”元素很好地匹配。

Answer 4

您可以使用click函数添加此类型的事件处理程序，方法与添加css类相同。

Answer 5

您可以使用addClass（）方法创建图像时创建一个类。而在其他地方有类似

的东西

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

JQuery - 添加onclick以动态生成img标记

5 个答案: