How to bind newly added HTML to Colorbox after Document Ready

Question

I'm rendering a gallery (or one picture) on server side and getting HTML like this:

<ul class='cs-style-3' >
  <li>
    <figure>
      <img height='100px' class='gallery' src='someurl'>
      <figcaption>
        <div imgtitle='sometitle' class='cgallery' href='someurl'></div>
      </figcaption>
    </figure>
  </li>
</ul>

jQuery:

$(document).ready(function ($) {

  $(".cgallery").colorbox({ rel: 'gallery', title: function () { return $(this).attr('imgtitle'); } });

})

HTML is received through ajax call and appended to page:

$(".ExpGallery").html(data.ExpGalleryHTML)

Problem is that HTML is received after document.ready and by clicking on

<div imgtitle='sometitle' class='cgallery' href='someurl'></div>

Colorbox simply doesn't work. When this HTML is placed on page before document ready, everything works fine, so, code is ok.

How to make colorbox work when related HTML is added after document ready?

Answer 1

re-initiate colorbox, once the html is rendered. Basically inside ajax callback function.

$.ajax({
  ....,
  success:function(){
       ....
       $(".ExpGallery").html(data.ExpGalleryHTML)
       $(".cgallery").colorbox({ 
          rel: 'gallery', 
          title: function () { 
                 return $(this).attr('imgtitle'); 
          } 
       });
    }
});