Removing the $(window).resize Event in jQuery

Question

Part of the page I'm developing requires a $(window).resize event to be added to a div when a user clicks a button, in order to toggle between resizing it with the window and leaving it fixed at its original size:

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

What I can't work out is how to "turn off" this event when the button is clicked again, so that the content stops resizing.

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

Any help with this would be greatly appreciated.

Solution 1

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

Note that this is extremely obtrusive and might break other code.

This is better way:

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

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

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

Solution 2

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

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

using a namespace on the query method will allow to to turn off the resize event for you method only.

Comments

[BiscuitBaker]

Thanks, that's got it! I wasn't aware of the .off command. I'll accept this answer as soon as the site lets me.

[JayD3e]

This isn't working for me. A similar situation, but instead of individual functions, I have functions attached to Backbone.js views. Upon calling off(), the event is unbound.

[Esailija]

@JayD3e .off unbinds the handlers from the event ,yes? :P

[JayD3e]

Nevermind, there is something odd going on. Basically, the method being bound is attached to an object, which is inherited via _.extend(). So context is undoubtedly getting messed up somewhere.

[Mister Smith]

This works because as it is said in the docs, resize is just a shortcut for $(window).on("resize", resizer), which I'd rather use for the sake of code symmetry.

[Leo Lansford]

I'm not seeing this work, I'm trying ("popup" is my function): $(window).on('resize.popupNamespace', popup); also trying .bind instead. the resize event is not successfully triggering.

[Leo Lansford]

Correction: this is working for me now: $(window).bind('resize.popupNamespace', popup); ~~ also ~~ $(window).unbind('resize.popupNamespace'); The namespacing seems like the safest way to avoid removing triggers unintentionally.

[codeBelt]

Just what I needed. Seems like I need a namespace to remove the resize event from the $(window) object. resize.needNamespaceToRemoveEvent

[Chris]

First time I've come across namespacing... this works great thanks!