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

【问题标题】：Remove and Add scroll event handler using jQuery .off or .unbind使用 jQuery .off 或 .unbind 删除和添加滚动事件处理程序
【发布时间】：2014-11-06 13:59:14
【问题描述】：

我正在编写自己的图像延迟加载函数，当 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').off('scroll', appName.featureName.lazyLoader);

的条件后将其删除，但我仍然能够触发滚动事件处理程序

我做错了什么？

【问题讨论】：

您最好切换一个布尔值来指示函数是否应该运行，而不是不断地绑定和解除绑定事件处理程序。 appName.featureName.getMorePhotos 函数的代码是什么样的？
我认为你使用布尔值而不是绑定和解除绑定是正确的......即使有下面的答案，当我通过 bool 时，一切正常！

标签： javascript jquery html css

【解决方案1】：

你试过这样吗？

$('#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);

【讨论】：

为什么你有一个委托的事件处理程序，搜索它自己？这将失败，因为 #ScrollDiv 不包含 #ScrollDiv。
.bind 方法已经过时了，自 1.7 版起应首选 .on，如 api 中所述：api.jquery.com/bind
强制？但是 1.7 版对我来说已经过时了。 ;)

【解决方案2】：

jQuery 的 .off() 函数不能这样工作。如果您只想添加和删除您自己的滚动处理程序，而不理会其他第 3 方滚动处理程序，您想使用

$("#scrollDiv").on("scroll.appName", appName.featureName.lazyLoader);

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

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

或者，只删除您自己的滚动处理程序，而单独保留一个单击处理程序：

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

有关更多信息，请参阅http://api.jquery.com/off/ 的文档。

【讨论】：