使用jQuery.off或.unbind删除和添加滚动事件处理程序

Remove and Add scroll event handler using jQuery .off or .unbind

本文关键字：添加 滚动 事件处理 程序 删除 jQuery off unbind 使用      更新时间：2023-09-26

我正在编写我自己的image Lazy Loading函数，当一个div滚动到它的底部时，我们加载一些新的图像，容器div的高度（在这种情况下为#ScrollDiv）会增加，当我们再次滚动到底部时，会进行相同的调用。这很好，尽管我在每次请求更多图像时都会传递一个"分页ID"（这被称为appName.featureName.PaginationConstant，在父作用域中），并且我想删除或冻结滚动事件，这样我们就不会发出其他请求或增加分页ID。例如：

appName.featureName.lazyLoader = function() {
    var currentScroll = $(this).scrollTop(),
        divHeight = $(this)[0].scrollHeight,
        actualHeight = $(this).height() + parseInt($(this).css('padding-bottom'))
    // have we hit the bottom of the Scroll Div?
    if((divHeight - actualHeight) <= currentScroll ) {
        // yes we have, remove the scroll, see I name this function below
        $('#ScrollDiv').off('scroll', appName.featureName.lazyLoader);
        // Now get more photos, in the function below I shall re-bind the scroll functionality
        appName.featureName.getMorePhotos(++appName.featureName.PaginationConstant);
    }
};
// this is the lazyload funtion
appName.featureName.lazyLoad = function () {
    $('#ScrollDiv').on('scroll', appName.featureName.lazyLoader);
};

除了解除绑定之外，一切都很好！我仍然能够启动滚动事件处理程序，尽管我已经尝试在$('#ScrollDiv').off('scroll', appName.featureName.lazyLoader); 满足我的条件后将其删除

我做错了什么？

你曾经这样尝试过吗？

$('#ScrollDiv').on('scroll','#ScrollDiv', appName.featureName.lazyLoader);

和

$('#ScrollDiv').off('scroll','#ScrollDiv', appName.featureName.lazyLoader);

或者你可以使用方法绑定太

$('#ScrollDiv').bind('scroll', appName.featureName.lazyLoader);

和

$('#ScrollDiv').unbind('scroll', appName.featureName.lazyLoader);
jQuery的.off（）函数不能以这种方式工作。如果你只想添加和删除你自己的滚动处理程序，而不想使用其他第三方滚动处理程序的话，你需要使用 
$("#scrollDiv").on("scroll.appName", appName.featureName.lazyLoader);

并删除所有您自己的处理程序：

$("#scrollDiv").off(".appName");

或者，只删除你自己的滚动处理程序，但不使用点击处理程序：

$("#scrollDiv").off("scroll.appName");

请参阅上的文档http://api.jquery.com/off/了解更多信息。

相关文章：