Question

我正在开发的页面的一部分需要在用户单击按钮时将$（窗口）.resize事件添加到div，以便在使用窗口调整其大小并将其固定为其原始位置之间切换尺寸：

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);
}

对此的任何帮助将不胜感激。

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);
}

Answer 2

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

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

在查询方法上使用命名空间将允许仅为您关闭resize事件方法。

在jQuery中删除$（window）.resize事件

2 个答案: