JQuery Fancybox is not working with data from JSON call

问题

                $.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 () {

                });
            }

I have this code that I want the fancybox to work with.

and here is the fancybox code:

$(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>';
            }
        });

    });

I get to display the images. but when i click on the images, it goes to the link, it doesnt open fancy box:(

how can i fix this?

when i copy the output raw data to html. fancybox works. but it doesnt work with data from json call. is this related to page load?

回答1:

Fancybox 1.3.x doesn't support dynamically added elements. That is the case with your JSON call.

However you can bind fancybox to those elements using the .on() (jQuery v1.7+) method and targeting their parent container like:

$(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

Also add tabindex to your generated <a> tag to fix a bug with Chrome like:

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

Check this post for further information and DEMO.

回答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 () {

            });
        });

回答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>';
                    }
                });
            });
        });

来源：https://stackoverflow.com/questions/10460769/jquery-fancybox-is-not-working-with-data-from-json-call