AJAX加载后html5lightbox工作不更 [英] html5lightbox not working after ajax load more

问题描述

我有这么多的图像的产品页面。我使用AJAX加载更多加载额外的产品图片。但html5lightbox不工作在阿贾克斯负载更多的产品。这是我的code，

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    ＆LT;？PHP如果（$ hasLoadMore）{＆GT;

        $（'＃loadMore）。点击（函数（事件）{
            / *对事件法* /
            $按钮= $（本）;
            $（本）.prop（已禁用，真正的）;
            无功补偿数=（$（'＃偏移）VAL（））;
            VAR限额= $（'＃限值）VAL（）。
            $阿贾克斯（{
                网址：ajax_walltiles.php，
                键入：POST，
                数据：{parent_category：'＆LT; PHP的echo $ parentCateogry; ？＆GT;'，product_limit：$（＃product_limit）VAL（），偏移： offset+1,limit:limit,order_field:$('#order_field').val(),order_by:$('#order_by').val(),parent_page_id:$("#parent_page_id").val()}
            }）
            .done（功能（数据）{
                $ button.prop（已禁用，假）;
                如果（数据！=空）
                {
                    $（＃偏置）VAL（偏移+ 1）;
                    $（'＃category_contents'）追加（数据）;
                    $（'＃网格）。mixitup（{
                        效果：['淡出'，'规模'，'模糊']，
                        transitionSpeed​​：500
                    }）;
                    $（本）.prop（已禁用，假）;
                }
                其他
                {
                    $（＃loadMore）隐藏（）。
                }
            }）;

        }）;

        $（'＃loadMore）。点击（函数（）{
            $（'＃category_contents）显示（）。

        ＆LT; PHP}＆GT？;
    }）;
＆LT; / SCRIPT＆GT;
 

解决方案

试试这个，

  .done（功能（数据）{
    $ button.prop（已禁用，假）;
    如果（数据！=空）{
        $（＃偏置）VAL（偏移+ 1）;
        $（'＃category_contents'）追加（数据）;
        $（'＃网格）。mixitup（{
            效果：['淡出'，'规模'，'模糊']，
            transitionSpeed​​：500
        }）;
        $（。html5lightbox）html5lightbox（）; //＆所述;  - 再次初始化夹
        $（本）.prop（已禁用，假）;
    } 其他 {
        $（＃loadMore）隐藏（）。
    }
}）;
 

I have a product page with so many images. I am using ajax load more to load extra product images. But html5lightbox is not working on the ajax load more products. Here is my code,

<script type="text/javascript">
    <?php if( $hasLoadMore ) { ?>

        $('#loadMore').click(function(event) {
            /* Act on the event */
            $button = $(this);
            $(this).prop("disabled",true);
            var offset = Number($('#offset').val());
            var limit = $('#limit').val();
            $.ajax({
                url: 'ajax_walltiles.php',
                type: 'POST',
                data: {parent_category:'<?php echo $parentCateogry; ?>',product_limit:$("#product_limit").val(),offset: offset+1,limit:limit,order_field:$('#order_field').val(),order_by:$('#order_by').val(),parent_page_id:$("#parent_page_id").val()}
            })
            .done(function(data) {
                $button.prop("disabled",false);
                if( data != "empty" )
                {
                    $("#offset").val(offset+1);
                    $('#category_contents').append(data);
                    $('#Grid').mixitup({
                        effects: ['fade','scale','blur'],
                        transitionSpeed: 500
                    });
                    $(this).prop("disabled",false);
                }
                else
                {
                    $("#loadMore").hide();
                }
            });

        });

        $('#loadMore').click(function(){
            $('#category_contents').show();

        <?php } ?>
    });
</script>

解决方案

Try this,

.done(function (data) {
    $button.prop("disabled", false);
    if (data != "empty") {
        $("#offset").val(offset + 1);
        $('#category_contents').append(data);
        $('#Grid').mixitup({
            effects: ['fade', 'scale', 'blur'],
            transitionSpeed: 500
        });
        $(".html5lightbox").html5lightbox();//<-- initialize lightbox again
        $(this).prop("disabled", false);
    } else {
        $("#loadMore").hide();
    }
});

这篇关于AJAX加载后html5lightbox工作不更的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！