您好我有一个可调整大小的div:
<div id="mydiv" style="resize:both">
something here
</div>
我需要在用户调整此窗口时捕获事件。
两者
$("#mydiv").resize(function() {
alert('works');
});
和
$("#mydiv").bind('resize', function(){
alert('works');
});
不工作; /
答案 0 :(得分: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
回调。
答案 1 :(得分:1)
请尝试使用此代码:
(function() {
function myfunction(){
// do what you need to do in the event
}
$(window).on("resize", myfunction);
$(document).on("ready", myfunction);
})();
答案 2 :(得分:0)
您可以使用jquery ui来调整div的大小:
$("#mydiv").resizable();
如果你想在窗口大小调整上做一些事情,你需要这样的东西:
$(window).resize(function() {
alert("DO SOMETHING");
});
而check this plugin也是{{3}},我想这会对你有所帮助!
答案 3 :(得分: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