Question

$(document).ready(function (e) {
    sample(); // Initialize the function
}

function sample() {
    $(document).scroll(function (e) {
        var scroll_top = $(window).scrollTop();
        var document_bottom = scroll_top + $(window).height();
        var elementTop = $('.load-more').offset().top;
        var elementBottom = (elementTop + $('.load-more').height() - 50) // 50 px offset;
        if ((elementBottom <= document_bottom) && (elementTop >= scroll_top)) // User almost reach the end of visible items so load more data. Similar to infinite scroll
        {
            $(document).unbind("scroll"); // To prevent further requests until the load is complete
            $.ajax({
                url: "sample", // Sampel URl for AJAX load
                type: "GET",
                data: {
                    start: 1
                }, // Sample data
                dataType: "html",
                success: function (data) {
                    data = $(data);
                    $('#categories-rendered').append(data).masonry('appended', data); // Masonry append items
                    $(document).bind("scroll"); // To rebind the scroll event
                }
            });
        }
    });
} // Sample function ends here

重新绑定滚动不起作用。这个程序错了吗？

Answer 1

目前您正在将滚动事件重新绑定为空。

这里我已经提取了函数并创建了一个名为myfunction的新函数。和使用此功能的绑定滚动事件

简明

var myfunction = function (e) {//Your logic};
$(document).bind("scroll", myfunction );
$(document).unbind("scroll");

完整代码

$(document).ready(function (e) {
    sample(); // Initialize the function
});

function sample() {
    $(document).scroll(myfunction);

    //Create a seperate function 
    function myfunction(e) {
        var scroll_top = $(window).scrollTop();
        var document_bottom = scroll_top + $(window).height();
        var elementTop = $('.load-more').offset().top;
        var elementBottom = (elementTop + $('.load-more').height() - 50) // 50 px offset;
        if ((elementBottom <= document_bottom) && (elementTop >= scroll_top)) // User almost reach the end of visible items so load more data. Similar to infinite scroll
        {
            $(document).unbind("scroll"); // To prevent further requests until the load is complete
            $.ajax({
                url: "sample", // Sampel URl for AJAX load
                type: "GET",
                data: {
                    start: 1
                }, // Sample data
                dataType: "html",
                success: function (data) {
                    data = $(data);
                    $('#categories-rendered').append(data).masonry('appended', data); // Masonry append items

                    //rebind with your function
                    $(document).bind("scroll", myfunction); // To rebind the scroll event
                }
            });
        }
    }
} // Sample function ends here

Answer 2

尝试将事件放入函数中：

var e = function (e) { ... };
$(document).bind("scroll", e);
$(document).unbind("scroll", e);

您遇到的问题是使用匿名函数。

jQuery重新绑定事件函数

2 个答案: