javascript - 点击功能不起作用

Question

我必须为我的项目使用动态创建的图像。我用 jQuery 做这个：

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

但是如果单击图像，我将无法运行功能。我试过：

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

和点击：

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

[...]

function test(){
   alert('Works!');
}

但两种方式都不起作用......我做错了什么？

Answer 1

试试这个，你需要使用 on() 并委托最近的静态父元素来动态添加元素

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

Answer 2

当你这样做

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

它只是将它绑定到 dom 中的元素，所以一旦你添加了动态 html，它甚至不会绑定到那个 html。在这种情况下，如果您使用

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

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

Answer 3

只需在创建图像时添加事件处理程序？

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 }

.click(clickHandler)并像上面的例子一样添加它。