resize event handler is called twice in IE

[aercolino]

In IE7 (at least) the resize event handler is called twice. For example, in the following script I get 6 alerts instead of 3. The commented code is a workaround.

jQuery( window )
.bind( 'resize', /*{ count: 1 },*/ function( event ){
/*	  
  if (event.data.count == 1)
  {
    event.data.count = 0;
  }
  else 
  {
    event.data.count = 1;
    return;
  }
*/	  
  var w = $( window );
  var d = $( document );
  var b = $( 'body' );
  alert( 'w: ' + w.width() + ', ' + w.height() );
  alert( 'd: ' + d.width() + ', ' + d.height() );
  alert( 'b: ' + b.width() + ', ' + b.height() );
} );

I thought that the 'one' method could fit here but maybe I misunderstood its intended usage. In fact, it works once, and then never more. For the first resizing, the handler bound with 'one' is called, but for any other resizing after the first one, the handler is never called again. (unbound?)

[brandon]

Please see this article for a possible workaround for this IE issue: ​http://snook.ca/archives/javascript/ie6_fires_onresize/

You could also use a setTimeout to call another function ... if the resize method is called again before the setTimeout has fired, just reset it.

And you are correct about the one method. It unbinds the event after it fires the first time.

[aercolino]

OK. I've put up a jQuery plugin for solving this issue: ​http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/

[harking]

Can this issue be looked into again? It seems that a fix for this would fit perfectly into jQuery core, rather than a plugin.

[dmethvin]

This really seems tricky to work around in jQuery, but relatively easy for an application to solve using one of the approaches above. If there's a simple patch someone can contribute for the problem, feel free to attach it and reopen the ticket.