php - jquery在循环中触发点击

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在回调函数中使用了一个闭包变量来处理点击事件。此问题的解决方案是从事件属性中获取单击的元素，如下所示。事件处理程序方法内部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);
}