Question

我有一个JSON Facebook Graph API请求成功部分的例子，

success: function(res){
                    console.log(res);
                    $(res.data).each(function(index, value){

                        var pic = 'https://graph.facebook.com/' + value.id + '/picture?width=200&height=200';

                        $('<img class="hover" src="'+pic+'" width="200" height="200">').load(function(){
                            $(this).appendTo("#results").fadeIn("fast");
                            $(this).wrap('<a href="http://facebook.com/'+value.id+'" target="_blank"></a>');
                        })

                    });
                },

查找收到的数据对象，将page-id图片放在img标记内，当它已经加载时，它会将其附加到#results div。

但是我无法控制img .hover元素。我试过

$("img.hover").hover(function(){
                $(this).fadeOut() //for example
            });

没有任何反应。我怀疑那是因为创建文档时确实存在任何img。那么，如何获得这些新元素？

Answer 1

您需要使用event delegation，.hover()方法是注册mouseenter和mouseleave事件的快捷方式，所以

$(document).on('mouseenter', 'img.hover', function () {
    $(this).fadeIn() //for example
}).on('mouseleave', 'img.hover', function () {
    $(this).fadeOut() //for example
});

通过.ajax（）请求添加动态HTML的正确方法

1 个答案: