Resize事件不适用于div resize:两者

Question

你好，我得到了一个可调整大小的div：

<div id="mydiv" style="resize:both">
something here
</div>

我需要捕捉事件，当用户调整此窗口的大小。

两者都有

$("#mydiv").resize(function() {
        alert('works'); 
    });

和

$("#mydiv").bind('resize', function(){
        alert('works'); 
    });

不工作;/

Answer 1

the resize event实际上只在窗口更改大小时触发，而不是在特定元素调整大小时触发。

如果您想要在调整大小时在特定元素上创建事件，我过去曾使用过this plugin；效果很好。

你也可以这样做：

$.fn.changeSize = function(fn){
var $this = this,
    w0 = $this.width(),
            pause = false; // this is only necessary if you don't want the callback to overlap
$this.sizeTO = setInterval(function(){
         if (!pause){
    var w1 = $this.width();
    if (w1 != w0) { 
        pause = true
        w0 = w1;
        fn(function(){pause=false;}); // if you don't want the callback to overlap, have the callback accept another callback to resume the check.
    }
         }
}, 100);
}

这每隔.1秒检查一次元素。如果高度发生了变化，它将调用fn回调。

Answer 2

请尝试使用以下代码：

(function() {
    function myfunction(){
       // do what you need to do in the event
    }

    $(window).on("resize", myfunction);
    $(document).on("ready", myfunction);
})();

Answer 3

您可以使用jquery ui来调整div的大小：

$("#mydiv").resizable();

FIDDLE

如果你想调整窗口大小，你需要这样做：

$(window).resize(function() {
  alert("DO SOMETHING");
});

还有check this plugin，我想这会对你有帮助的！