Question

您好我想在列表项中添加facebook朋友缩略图并在每个上添加触发器。但现在它触发了点击，但它只获得了点击回调中最后一个附加项目的fbid。如何正确附加每个点击事件？

for(var i=0;i<obj.photo.length;i++) {
var img=$('<img src="https://graph.facebook.com/'+obj.photo[i]['fb_id']+'/picture" />');
var anchor=$('<a href="#" id="'+obj.photo[i]['fb_id']+'"></a>');
var li = $('<li></li>');
var fbul = $('#fb_friends');

anchor.append(img);
li.append(anchor);
fbul.append(li);

anchor.click(function(){
    alert(anchor.attr('id'));
});
}

Answer 1

问题是因为，你在回调函数中使用了一个闭包变量anchor来实现click事件。此问题的解决方案是从事件属性中获取单击的元素，如下所示。在事件处理程序方法this内部指向处理程序注册到的元素。

anchor.click(function() {
    var $this = $(this);
    alert($this.attr('id'));
});

但是，由于您正在使用动态元素，我建议使用.on()

的事件委派

var fbul = $('#fb_friends');

fbul.on('click', 'a', function() {
    var $this = $(this);
    alert($this.attr('id'));
})

for (var i = 0; i < obj.photo.length; i++) {
    var img = $('<img src="https://graph.facebook.com/' + obj.photo[i]['fb_id']
            + '/picture" />');
    var anchor = $('<a href="#" id="' + obj.photo[i]['fb_id'] + '"></a>');
    var li = $('<li></li>');

    anchor.append(img);
    li.append(anchor);
    fbul.append(li);
}

jquery触发器在循环中单击

1 个答案: