Question

我必须为我的projekt使用动态创建的图像。我用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!');    
    });
};

和onClick：

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（）和delegate来动态添加元素

    $(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)。

Click上的功能不起作用

3 个答案: