Question

我有一个包含这么多图片的产品页面。我正在使用ajax加载更多来加载额外的产品图像。但是html5lightbox没有在ajax上加载更多的产品。这是我的代码，

<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>

Answer 1

尝试使用委托方法：

$(document).on('click', "#loadMore", function(event){
      // All your code here
});

而不是您编写的简单点击事件。

这对你有用..

Answer 2

试试这个，

.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无法正常工作

2 个答案: