JQuery Fancybox无法使用来自JSON调用的数据

Question

   $.getJSON("/Home/AjaxBrowse", { page: p ? p : 1 }, function (data)    {  
        var output = ""; 
        jQuery.each(data.users, function (key, value) { 

         output += '<li>' 
         + "<div class=\"slidera_img\">" 
         + "<a href=\"/image/viewImage/" + data.users[key].ImageId + "\" rel=\"example_group\">" 
         + "<img src=\"/image/viewimage/" + data.users[key].ImageId + "?imageType=thumb\" width=\"100=\" height=\"100\" />" 
         +"</a>" 
         + "</div>" 

         + ' </li>'; 
        }); 

        $("#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 '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '</span>'; 
      } 
     }); 

    }); 

我得到来显示图像。但是当我在图像上单击，它进入的链接，它不打开盒子看中:(

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

当我输出的原始数据复制到HTML。的fancybox的作品。但从JSON呼叫数据不工作，这是相关页面加载？

Answer 1

的fancybox 1.3.x中不支持动态添加的元素，这是您的通话JSON的情况。

但是可以绑定的fancybox使用.on()（jQuery的V1.7 +）方法，并针对他们的父容器像那些元素：

$(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 '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '</span>'; 
    } 
    }); // fancybox 
}); // on 
}); // ready 

同时添加tabindex你产生<a>标签解决Chrome浏览器一样的错误：

+ "<a tabindex=\"1\" href=\"/image/viewImage/" + data.users[key].ImageId + "\" rel=\"example_group\">" 

Check this post for further information和DEMO。

Answer 2

$(document).ready(function() { 
      $.getJSON('/Home/AjaxBrowse', { page: p ? p : 1 }, function (data) { 
       var output = ''; 
       $.each(data.users, function (key, entity) { 
        output += '<li><div class="slidera_img"><a href="/image/viewImage/' + entity.ImageId + '" rel="example_group">' 
           + '<img src="/image/viewimage/' + entity.ImageId + '"?imageType=thumb" width="100" height="100" /></a></div></li>'; 
       }); 

       $("#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 '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '</span>'; 
        } 
       }); 
      }).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 += '<li><div class="slidera_img"><a href="/image/viewImage/' + entity.ImageId + '" rel="example_group">' 
           + '<img src="/image/viewimage/' + entity.ImageId + '"?imageType=thumb" width="100" height="100" /></a></div></li>'; 
       }); 

       $("#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 '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '</span>'; 
        } 
       }); 
      }); 
     });