0

你好，我有一个可调整大小的 div：

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

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

两个都

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

和

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

不工作;/

4

4 回答 4

1

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

如果你想在调整特定元素的大小时创建一个事件，我过去使用过这个插件；效果很好。

你也可以这样做：

$.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);
}

这会每 0.1 秒检查一次元素。如果高度发生了变化，那么它将调用fn回调。

于 2013-09-06T16:30:42.430 回答
1

请尝试使用此代码：

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

    $(window).on("resize", myfunction);
    $(document).on("ready", myfunction);
})();
于 2013-09-06T16:30:50.527 回答
0

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

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

小提琴

如果你想在窗口调整大小上做一些事情，你需要这样的东西：

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

并检查这个插件，我认为这会对你有所帮助！

于 2013-09-06T16:29:54.717 回答
0

所有 div 案例的最佳解决方案（参考：https ://web.dev/resize-observer/ ）

var ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement); // replace someElement with your element var
于 2021-06-12T11:58:00.147 回答