Lightbox refresh after ajax load

I have a really simple question; I’m developing a wordpress site that uses a filtering plugin. This plugin loads the results using ajax. The goal is to open the results in a lightbox (I’m using colorbox). I can get it to work on the first page, but after the results are dynamically added, it doesn’t work anymore.

I know I have to reinitialise my colorbox after the ajax load, and the plugin also provides a code (http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/), the thing is I’m not exactly sure where to place it.

I’ve added the following to the page’s footer:

<script>

//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
  console.log("ajax start");
});

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$('.colorbox-link', context).colorbox();
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    //so load your lightbox or JS scripts here again
    $('.colorbox-link', context).colorbox();
});

//an event fired when S&F is initialised and S&F scripts have been loaded
$(document).on("sf:init", ".searchandfilter", function(){
    console.log("S&F JS initialised");
});

</script>

Thanks!