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

时间:2014-11-06 13:59:14

标签: javascript jquery html css

我正在编写自己的图像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);

满足条件后删除它

我做错了什么?

2 个答案:

答案 0 :(得分: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);

答案 1 :(得分:1)

jQuery的.off()函数不会那样工作。如果您只想添加和删除自己的滚动处理程序并单独保留其他第三方滚动处理程序,则需要使用

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

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

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

或者,仅删除自己的滚动处理程序,但只留下一个单击处理程序:

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

有关详情,请参阅http://api.jquery.com/off/上的文档。