jquery - jquery选择器找不到加载ajax的元素以使用灯箱

Question

通过ajax加载内容时，我试图让smoothdivscroll与灯箱插件一起使用，但到目前为止我的努力都是徒劳的。这就是为什么我在这方面向你寻求帮助。

这是我的测试页面的链接： http: //cablemodem.fibertel.com.ar/gustavolauro/

并在代码下方，

<script type="text/javascript">
    $(document).ready(function () {
        $("#makeMeScrollable").smoothDivScroll({
        });
        $("#item-100").click(function(){
            $("#makeMeScrollable").smoothDivScroll("getAjaxContent", "retratos.html", "replace");
        });
        $("#item-101").click(function(){
            $("#makeMeScrollable").smoothDivScroll("getAjaxContent", "artistico.html", "replace");
        });
        $('a[rel*=lightbox]').lightBox();   
    });
</script>

我正在使用 smoothdivscroll smoothdivscroll.com 和灯箱http://leandrovieira.com/projects/jquery/lightbox/

问题是 ajax 加载的内容不适用于灯箱，我认为这是因为选择器 a[rel*=lightbox] 找不到最近加载的内容，但即使我尝试了很多东西我也无法解决问题.

希望你能帮忙，提前谢谢。

Answer 1

Firebug 是你的朋友——学会爱它。

现在，当您加载 ajax 时，您必须确保绑定所有新内容，因为当您尝试将锚标签与灯箱绑定时，它最初不在页面上

就像是：

 <script type="text/javascript">
        $(document).ready(function () {
            $("#makeMeScrollable").smoothDivScroll({
                        addedAjaxContent : function(){
                           $("#makeMeScrollable").find('a[rel*=lightbox]').lightBox();
                        }
            });
            $("#item-100").click(function(){
                $("#makeMeScrollable").smoothDivScroll("getAjaxContent", "retratos.html", "replace");

            });
            $("#item-101").click(function(){
                $("#makeMeScrollable").smoothDivScroll("getAjaxContent", "artistico.html", "replace");
            });
            $('a[rel*=lightbox]').lightBox();   
        });
    </script>