Question

I’m using jquery colorbox to popup user accounts in a window. I also have a button that loads more users into the page via ajax, but for some reason users loaded with ajax do not popup in colorbox window. How can I get colorbox to work with the content that was returned via ajax?

function loadMore(pageNo) {
    //$("#loading").html('Loading...').show();
    var url = '/search/resultsAjax';
    $.get(url, {page: pageNo}, function(response) {
        $("#results").append(response);
        //$("#loading").hide();
    });
}

$(document).ready(function() {
    var currPage = 1;
    $("a.next").click(function() {
        loadMore(++currPage);
    });

    $("a.usr").colorbox({width:"960px", height:"90%", iframe:true});
});

Answer 1

When you bind colorbox in $(document).ready() with this:

$("a.usr").colorbox({width:"960px", height:"90%", iframe:true});

jQuery will go search through the page, grab everything that matches a.usr, bind colorbox to those items, and then forget all about a.usr. jQuery won’t remember that you’re interested in a.usr so the new ones won’t be colorbox’d.

The usual solution to this sort of thing is to use .live() or .delegate() but those won’t work here as there isn’t a “colorbox” event.

However, you can bind colorbox by hand easily enough. Try change loadMore to something more like this:

function loadMore(pageNo) {
    $.get('/search/resultsAjax', { page: pageNo }, function(response) {
        var $html = $(response);
        $html.find('a.usr').colorbox({ width: '960px', height: '90%', iframe: true });
        $('#results').append($html);
    };
}

You just turn the response HTML into a jQuery object, find all the a.usr things inside it, bind colorbox to those, and then insert the new HTML into the DOM as usual.