Question

I created a couple of nested divs, the inner horizontally resizeable, the outer vertically resizeable. I have it such that resizing a parent div (or the window) causes the children to resize.

However, I’m finding that when a child div is resized, it’s ancestors all rx the resize event even even when their sizes don’t change.

I’m using Chrome 18.0 on Win7.

Example here: http://jsfiddle.net/m95Ha/
Resize the red & cyan sides and the window, and watch the chars in the black div. For example, resizing the cyan side horizontally causes an ‘i’ (‘#inner’ resize event), an ‘o’ ‘i’ (‘#outer’ resize event), and a ‘w’ (window resize event).
I wouldn’t have expected the ‘o’ or the ‘w’.

Is this a jQuery thing, or a Chrome thing, or perhaps the HTML/DOM standard?

Answer 1

This is intended behavior of jQuery UI; the resize method bubbles like normal events. You can filter out resize events that occur on non jQuery UI resizable widgets with the following if necessary:

$('whatever').bind('resize', function(event) {
    if (!$(event.target).hasClass('ui-resizable')) {
        //do stuff here
    }
});

There’s some relevant discussion in this question as well – jQuery UI resizable fire window resize event.