CODEWITHSUNDEEP
jqueryajaxdomcolorbox
dllhell
dllhell

Reputation: 2014

How to bind newly added HTML to Colorbox after Document Ready

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?

Upvotes: 0

Views: 123

Answers (1)

bipen
bipen

Reputation: 36531

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

Upvotes: 1

Related Questions