jQuery中删除$(window).resize事件

Question

我正在开发的页面的一部分需要在用户点击按钮时向一个div添加$(window).resize事件，以便在调整窗口大小和保留其原始大小之间切换：

function startResize() {
    $(window).resize(function() {
        $("#content").width(newWidth);
        $("#content").height(newHeight);
    });
}

我想知道如何在按钮再次被点击时“关闭”此事件，以停止内容的调整大小。

function endResize() {
    // Code to end $(window).resize function
    $("#content").width(originalWidth);
    $("#content").height(originalHeight);
}

任何关于这个问题的帮助将不胜感激。

- BiscuitBaker

Answer 1

function endResize() {
    $(window).off("resize");
    $("#content").width(originalWidth);
    $("#content").height(originalHeight);
}

请注意，这种方式非常突兀，可能会破坏其他代码。

以下是更好的方式：

function resizer() {
    $("#content").width(newWidth);
    $("#content").height(newHeight);
}

function startResize() {
    $(window).resize(resizer);
}

function endResize() {
    $(window).off("resize", resizer);
}

- Esailija

---

谢谢，搞定了！我不知道有 .off 命令。一旦网站允许，我会接受这个答案。 - BiscuitBaker

这对我不起作用。类似的情况，但是我有附加到Backbone.js视图的函数而不是个别函数。调用off（）后，事件将被解除绑定。 - JayD3e

@JayD3e .off 取消事件处理程序绑定，对吧？ :P - Esailija

没事，有些奇怪的事情正在发生。基本上，被绑定的方法附加在一个对象上，该对象通过 _.extend() 继承。因此，上下文无疑在某个地方出了问题。 - JayD3e

这个代码有效是因为正如文档中所说，resize只是$(window).on("resize", resizer)的快捷方式，出于代码对称性的考虑，我更愿意使用后者。 - Mister Smith

Answer 2

function startResize() {
   $(window).on("resize.mymethod",(function() {
     $("#content").width(newWidth);
     $("#content").height(newHeight);
   }));
}

function endResize() {
   $(window).off("resize.mymethod");
}

在查询方法上使用命名空间，将允许你仅关闭该方法的调整大小事件。

- arin

---

我没有看到这个代码起作用，我尝试使用以下代码（"popup"是我的函数）：$(window).on('resize.popupNamespace', popup); 我也尝试使用.bind。但是调整大小事件并没有成功触发。 - Leo Lansford

更正：现在这个对我有效：$(window).bind('resize.popupNamespace', popup); ~~ 同时 ~~ $(window).unbind('resize.popupNamespace'); 命名空间似乎是避免意外删除触发器的最安全方式。 - Leo Lansford

正是我需要的。看起来我需要一个命名空间来从$(window)对象中删除resize事件。resize.needNamespaceToRemoveEvent - codeBelt

第一次遇到命名空间...这很好用，谢谢！ - Chris