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

All of these answers are not going to help. The issue is that resize event bubbles up to the window. So eventually the e.target will be the window even if the resize happened on the div. So the real answer is to simply stop propagating the resize event:

$("#mydiv").resizable().on('resize', function (e) {
    e.stopPropagation(); 
});

Answer 2

I think that actually the safest would be to do the following:

$(window).bind('resize', function(event) {
    if (this == event.target) {
        console.log("resize");
    }
});

Answer 3

$(window).resize(function(e) {
  if (e.target == window)
    /* do your stuff here */;
});

http://bugs.jqueryui.com/ticket/7514

Answer 4

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.)

Answer 5

For me, with JQuery 1.7.2 none of the solution proposed here worked. So I had to come up with a slightly different one that works on older IE browsers as well as Chrome...

$(window).bind('resize', function(event) {
    if ($(event.target).prop("tagName") == "DIV") {return;}  // tag causing event is a div (i.e not the window)
    console.log("resize");
});

This might have to be adapted if the element resized is something else than a <div>