jquery trigger click in a loop

Question

Привет Я пытаюсь добавить миниатюру друзей Facebook в список и добавить триггер для каждого из них. но теперь он вызывает щелчок, но он только получает fbid последнего добавленного элемента внутри обратного вызова клика. Как я могу присоединить событие click для каждого из них правильно?

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); 
}