jQuery和AJAX - 使用Ajax添加的对象动态不适用于jQuery函数？ - 编程

So I have a MVC code that generates something like this

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

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

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

And I'm trying to make a jQuery to infinite scroll and as the user is scrolling, it generates more photosets.

而且我正在努力使jQuery无限滚动,并且当用户滚动时,它会生成更多的照片。

I was somewhat successful in doing that but, after I generate more photosets with my infinite scroll, the newly added code won't work with my previous jQuery plugin to navigate between images.

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

Here is the jQuery code to navigate:

这是要导航的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);
    });
});

And the Ajax function to call for more photosets, passing the page number:

和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;
}

And this is the function that calls the infinite scroll:

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

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

I did some research but couldn't stabilish a reason why my code doesn't work, tried some things but did not have success. If anyone could help me, would be great! Thanks in advance, and sorry for any mistake, I'm extremely new with jQuery and Ajax.

我做了一些研究,但无法稳定我的代码不起作用的原因,尝试过一些事情,但没有成功。如果有人能帮助我,那就太好了!在此先感谢,并对任何错误表示抱歉,我对jQuery和Ajax非常新。

1 个解决方案

#1

You can try with the event delegation for the click event on .prev and .next elements:

您可以尝试使用.prev和.next元素上的click事件的事件委派:

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

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

1 个解决方案

#1

更多相关文章

随机推荐