Question

我正在向DOM添加新图像到这个DIV ......

<div id="photoArea"></div>

我加载像这样的新图像......

function showImages(token,status){
var jqxhr = $.getJSON("/api/1/photos/show.json/?callback=?",{ 
    token: token,
    status_id: status,
},function(data) {
    var html = "";
$.each(data.photos, function(i,photo){
    html = '<a class="fancybox" rel="gallery1" href="/photos/'+photo.owner_id+'/'+photo.id+'-'+photo.photo_token+'.'+photo.extension+'">';
    html += '<img src="/photos/'+photo.owner_id+'/'+photo.id+'-'+photo.photo_token+'x200.'+photo.extension+'" alt="" /> ';
    html += '</a>';
    $('#photoArea').append(html);
});
}).success(function(data) { });
} // end function

我尝试了很多组合。其中之一是：

$(document).on("click",".fancybox",function(ev){
 $.fancybox({
    href: this,
    type: 'image'
 });
});

当我对图像进行陈词滥调时，只会在导航器中显示图像。

我正在使用jQuery 1.7和fancybox v2。 Las Chrome和Firefox版本

如何将fancybox中的新图像显示到这个新图像我

Answer 1

“on”函数通常用于DOM的现有项目。如果您想要考虑通过ajax重新获取的项目，最好使用.delegate（）。

之类的东西

$("#photoArea").delegate("img.fancybox", "click", function() {
    ...
});

如果你已经在getJSON函数中实现了它，那么有一个空成功函数是什么意思？您可能应该删除它并使用Firebug或Chrome Inspector验证您的数据实际上已添加到DOM中。

希望有所帮助：）

Answer 2

使用fancybox v2.x，您只需要这个自定义脚本

$(document).ready(function(){
 $(".fancybox").fancybox({
  // options if needed
 }); // fancybox
}); // ready

fancybox v2.x支持现有和动态添加的元素，因此您不需要.on()或.delegate()。只需确保在添加图像的容器之前加载jQuery，然后是fancybox js文件和自定义脚本。

使用fancybox与通过jQuery Append添加的新图像的问题

2 个答案: