jQuery re-bind event function

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

Rebinding the Scroll does not works. Is this procedure wrong?

Answer 1

Currently you re-binding scroll event to nothing.

Here I have extracted the function and created new function called myfunction. and binded scroll event with this function

Concise

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

Complete Code

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

Try to put the event in a function:

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

The issue you have is using an anonymous function.