Javascript 单击功能不起作用

我必须为我的项目使用动态创建的图像。我使用jQuery执行此操作：

var img = $('<img />').attr({ 'id': i, 'src': e.files[i].thumbnails["200x200"], 'alt':e.files[i].name, 'class': 'photo'}).appendTo($('#img'));

和onClick：

var img = $('<img />').attr({ 'id': i, 'src': e.files[i].thumbnails["200x200"], 'alt':e.files[i].name, 'class': 'photo', 'onClick': 'test();' }).appendTo($('#img'));

但这两种方法都不起作用。。。

---

我做错了什么？

试试看，对于动态添加的元素，您需要在最近的静态父元素上使用on（）和delegate

    $(document).on('click','.photo',function(){
        alert('Works!');    
    });

当你这样做的时候

$(".photo").click(function(){
    alert('Works!');    
});

它只是将其绑定到dom中的元素，因此一旦添加动态html，它甚至不会将其绑定到该html。在这种情况下，如果您使用

$(document).on('click','.photo',function(){
  alert('Works');
});

---

此代码会将click事件绑定到html中的每个元素，即使它是动态添加的。

创建图像时是否只添加事件处理程序

var img = $('<img>')
            .attr({
                id: i,
                src: e.files[i].thumbnails["200x200"],
                alt: e.files[i].name,
                // keep 'class' for jshint 
                'class': 'photo'
            })
            .click(function () {
                alert('Works!');
            })
            // you can leave out $('#img') and just write:
            .appendTo('#img');

然后像

一样添加它。在上面的示例中单击（clickHandler）

$(document).on('click','.photo',function(){
  alert('Works');
});

var img = $('<img>')
            .attr({
                id: i,
                src: e.files[i].thumbnails["200x200"],
                alt: e.files[i].name,
                // keep 'class' for jshint 
                'class': 'photo'
            })
            .click(function () {
                alert('Works!');
            })
            // you can leave out $('#img') and just write:
            .appendTo('#img');

function clickHandler() { // do stuff }