0

こんにちは、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'));
});
}
4

1 に答える 1

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);
}
于 2013-04-01T03:36:23.680 に答える