jquery触发器在循环中单击

Question

Hi I am trying to append facebook friends thumbnail in list item and add trigger on each of them. but now it trigger the click but it's only getting fbid of the last appended item inside the click callback. How can I attach click event on each of them correctly?

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

the problem is because, you are using a closure variable anchor inside your callback function for click event. The solution to this problem is to fetch the clicked element from the event properties as given below. Inside the event handler method this points to the element to which the handler is registered to.

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

But since you are working with dynamic element I recommend using event delegation with .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);
}