JQuery Fancybox不使用来自JSON调用的数据

$.getJSON("/Home/AjaxBrowse", { page: p ? p : 1 }, function (data) { var output = ""; jQuery.each(data.users, function (key, value) { output += '
' + "
" + "" + "" +"" + "
" + ' 
'; }); $("#namesList") .attr("start", data.pager.FirstItemOnPage) .html(output); $("#namesPager").html(pagedList.render(data.pager)); }).error(function () { }); } 

我有这个代码，我希望fancybox可以使用。

这是fancybox代码：

 $(document).ready(function () { $("a[rel=example_group]").fancybox({ 'transitionIn': 'none', 'transitionOut': 'none', 'titlePosition': 'over', 'type': 'image', 'titleFormat': function (title, currentArray, currentIndex, currentOpts) { return '' + (title.length ? '   ' + title : '') + ''; } }); }); 

我开始显示图像。 但当我点击图像，它转到链接，它没有打开花哨的盒子:(

我怎样才能解决这个问题？

当我将输出原始数据复制到html。 fancybox的作品。 但它不适用于来自json调用的数据。 这与页面加载有关吗？

Answer 1

Fancybox 1.3.x不支持动态添加的元素。 您的JSON调用就是这种情况。

但是，您可以使用.on() （jQuery .on() +）方法将fancybox绑定到这些元素， .on()其父容器定位为：

 $(document).ready(function () { $("div.slidera_img").on("focusin", function(){ $("a[rel=example_group]").fancybox({ 'transitionIn': 'none', 'transitionOut': 'none', 'titlePosition': 'over', 'type': 'image', 'titleFormat': function (title, currentArray, currentIndex, currentOpts) { return '' + (title.length ? '   ' + title : '') + ''; } }); // fancybox }); // on }); // ready 

还要将tabindex添加到生成的标记中以修复Chrome的错误，例如：

 + "" 

查看这篇文章以获取更多信息和DEMO。

Answer 2

 $(document).ready(function () { $.getJSON('/Home/AjaxBrowse', { page: p ? p : 1 }, function (data) { var output = ''; $.each(data.users, function (key, entity) { output += '
' + '
'; }); $("#namesList").attr("start", data.pager.FirstItemOnPage).html(output); $("#namesPager").html(pagedList.render(data.pager)); $("a[rel=example_group]").fancybox({ 'transitionIn': 'none', 'transitionOut': 'none', 'titlePosition': 'over', 'type': 'image', 'titleFormat': function (title, currentArray, currentIndex, currentOpts) { return '' + (title.length ? '   ' + title : '') + ''; } }); }).error(function () { }); }); 

Answer 3

 $(document).ready(function () { $.getJSON('/Home/AjaxBrowse', { page: p ? p : 1 }, function (data) { var output = ''; $.each(data.users, function (key, entity) { output += '
' + '
'; }); $("#namesList").attr("start", data.pager.FirstItemOnPage).html(output); $("#namesPager").html(pagedList.render(data.pager)); }).error(function () { }); $("a[rel=example_group]").livequery(function () { $(this).fancybox({ 'transitionIn': 'none', 'transitionOut': 'none', 'titlePosition': 'over', 'type': 'image', 'titleFormat': function (title, currentArray, currentIndex, currentOpts) { return '' + (title.length ? '   ' + title : '') + ''; } }); }); });