Question

我正在服务器端渲染一个图库（或一张图片）并获取这样的HTML：

<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通过ajax调用接收并附加到页面：

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

问题是在document.ready之后收到HTML并点击

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

Colorbox根本不起作用。

在文档就绪之前将此HTML放在页面上时，一切正常，因此代码正常。

如何在文档准备好后添加相关HTML时使彩色框工作？

Answer 1

一旦html呈现，

重新启动colorbox。基本上是在ajax回调函数中。

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

文档就绪后如何将新添加的HTML绑定到Colorbox

1 个答案: