Question

所以我有一个生成类似这样的MVC代码

<div class="photoset">
  <img />
  <img />
</div>

<div class="photoset">
  <img />
  <img />
  <img />
</div>

我试图让jQuery无限滚动，当用户滚动时，它会产生更多的照片。

我在这方面做得有些成功但是，在我使用无限卷轴生成更多照片后，新添加的代码无法使用我之前的jQuery插件在图像之间导航。

以下是要导航的jQuery代码：

的jQuery

$(document).ready(function () {
    $('.photoset').each(function () {
        $(this).data('counter', 0);
        $items = $(this).find('img')
        $(this).data('numItems', $items.length);
        $(this).closest('.row').prev('.row').find('.nav-informer').text($(this).data('counter') + 1 + " de " + $(this).data('numItems'));

        if (($items.eq(0).width() / $items.eq(0).height()) < 1) {
            $(this).css({
                width: "445",
                height: "667",
                margin: "auto"
            });
        }
    });

    var showCurrent = function (photoset) {
        $items = photoset.find('img');
        var counter = photoset.data('counter');
        var numItems = $items.length;
        var itemToShow = Math.abs(counter % numItems);
        $items.fadeOut(1000);
        $items.eq(itemToShow).fadeIn(1000);
    };

    /* ---------------------------------------------- /*
     * Prev
     /* ---------------------------------------------- */
    $('.prev').on('click', function () {
        var photoset = $(this).closest('.row').prev('.row').find('.photoset');
        photoset.data('counter', photoset.data('counter') - 1);
        if (photoset.data('counter') < 0)
            photoset.data('counter', photoset.data('numItems') - 1);
        photoset.closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));
        showCurrent(photoset);
    });

    /* ---------------------------------------------- /*
     * Next
     /* ---------------------------------------------- */
    $('.next').on('click', function () {
        var photoset = $(this).closest('.row').prev('.row').find('.photoset');
        photoset.data('counter', photoset.data('counter') + 1);
        if (photoset.data('counter') > photoset.data('numItems') - 1)
            photoset.data('counter', 0);
        photoset.closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));
        showCurrent(photoset);
    });
});

Ajax函数调用更多照片，传递页码：

的Ajax

var page = 0,
inCallback = false,
hasReachedEndOfInfiniteScroll = false;

var ulScrollHandler = function () {
    if (hasReachedEndOfInfiniteScroll == false &&
        ($(window).scrollTop() == $(document).height() - $(window).height())) {
        loadMoreToInfiniteScrollUl(moreRowsUrl);
        resizeNewElements();
    }
}

function loadMoreToInfiniteScrollUl(loadMoreRowsUrl) {
    if (page > -1 && !inCallback) {
        inCallback = true;
        page++;
        $(".loading").show();
        $.ajax({
            type: 'GET',
            url: loadMoreRowsUrl,
            data: "pageNum=" + page,
            success: function (data, textstatus) {
                if (data != '') {
                    $(".infinite-scroll").append(data);
                }
                else {
                    page = -1;
                }

                inCallback = false;
                $(".loading").hide();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
}

function showNoMoreRecords() {
    hasReachedEndOfInfiniteScroll = true;
}

这是调用无限滚动的函数：

    $(function () {
        $(".loading").hide();
    });
    var moreRowsUrl = '@Url.Action("index", "home")';
    $(window).scroll(ulScrollHandler);

我做了一些研究，但无法稳定我的代码无法工作的原因，尝试了一些但没有成功的事情。如果有人能帮助我，那就太好了！在此先感谢，对于任何错误感到抱歉，我对jQuery和Ajax都非常陌生。

Answer 1

您可以尝试使用事件委派来查看.prev和.next元素上的点击事件：

$(document).ready(function(){
    $(document).on('click', '.prev', function(){.....});
    $(document).on('click', '.next', function(){.....});
});

jQuery和AJAX - 使用Ajax添加的对象动态不能使用jQuery函数吗？

1 个答案: