Colorbox and Content returned via ajax

BugBusterX picture BugBusterX · Jan 26, 2011 · Viewed 12.2k times · Source

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

Woahdae picture Woahdae · Mar 23, 2012

If you want to make it work globally, regardless of how the content is loaded:

$('body').on('click', 'a.usr', function() {
    $(this).colorbox({width:"960px", height:"90%", iframe:true});
});