jquery - 如何在 jQuery 中正确分离事件处理程序

Question

我有这个 jQuery 函数，它可以使元素垂直居中并支持滚动:

    $.fn.center = function () {
        var self = this;
        this.css("position", "absolute");
        this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");            
        $(document).on("scroll", function () {
            self.center();
        });
        return this;
    };

它与 jQuery Block UI 插件一起使用:

    $('#cph')
        .block(finalOptions)
        .find('.blockUI.blockMsg')
        .center();

每次需要阻止 UI 时，我都会执行第二个代码片段。但是，当我取消阻止 UI 时，我只是使用 Block UI API 将其删除，但对滚动事件处理程序不执行任何操作。如果我多次阻止/取消阻止 UI，我将注册许多事件处理程序来滚动事件 - 我认为这很糟糕。但我不知道如何正确解决这个问题。你能建议一下吗？

Answer 1

使用jquery off

// assume you have a method for reuse purpose
function YourFunction(){
    // do something
};

$(document).on("scroll", YourFunction);
$(document).off("scroll", YourFunction);

请注意，除非您想分离所有事件处理程序，否则匿名函数在这种情况下将不起作用:

$(document).off("scroll");

您还可以在“on”和“off”事件时指定“命名空间”:

// delegate events under the ".validator" namespace
$(document).on("click.validator", function(){
    // do something
});

// remove only event handlers in the ".validator" namespace
$("form").off(".validator");