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});
});
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});
});