jQuery的觸發器點擊一個循環

Question

嗨我想附加Facebook列表項中的朋友縮略圖，並添加觸發器在他們每個人。但現在它觸發了點擊，但它只能獲得點擊回調中最後一個附加項的內容。我怎樣才能正確地附加他們每個人上的點擊事件？

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