jQuery UI resizable fire window resize event

Question

I have 2 events, one to detect window resize and other to detect the resizable stop of div.

But when I resize the div, in the console detect the window resize event.

Answer 1

You see this behavior because of event bubbling. One workaround: check the source of the event in the callback using event.target:

$(window).bind('resize', function(event) {
    if (!$(event.target).hasClass('ui-resizable')) {
        console.log("resize");
    }
});

Demo: http://jsfiddle.net/mattball/HEfM9/

---

Another solution is to add a resize handler to the resizable and stop the event's propagation up the DOM tree (that's the "bubbling"). (Edit: this should work, but for some reason does not: http://jsfiddle.net/mattball/5DtdY.)