Question

更新：因为每个人都挂了窗口调整大小

我在可调整大小的div中有一个div，我想检测子div的大小调整。我知道.on（'resize'）仅适用于窗口。我的问题完全基于子div调整大小。

<div id='main_wrapper'>
  <div id = 'child_div'>
  </div>
</div>

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#main_wrapper {
  height: 300px;
  width: 300px;
  background-color: blue;
}

#child_div{
  height: 100%;
  width: 100%;
}

$('#main_wrapper').resizable();

$('#child_div').on('resize', function() { //i know this isn't proper, how to do this is my question.
  alert('i changed');
})

https://jsfiddle.net/cyclingpaper/2kksqoLs/

感谢您的时间。

Answer 1

resize事件仅由window对象定位。您无法将其附加到除最顶层之外的另一个DOM树元素。

https://developer.mozilla.org/en-US/docs/Web/Events/resize

Answer 2

在这里：

https://jsfiddle.net/danhaswings/ejoxphov/2/

您无法将resize事件绑定到窗口以外的任何内容。

// cache objects
var $main_wrapper = $('#main_wrapper');

// on window resize
$(window).resize(function() {

    console.log('The window has resized.');

    // random example to run on window resize
    $main_wrapper.css({
        'background-color': 'red'
    });

});

Answer 3

发布编辑： Downvoters请无缘无故地删除downvotes！

resize事件仅适用于window，不适用于元素。请改用此代码：

$(window).on('resize', function(){
  alert('i changed');
});

小提琴：https://jsfiddle.net/effsmpdm/

看看这个   http://benalman.com/code/projects/jquery-resize/examples/resize/

它有各种各样的例子。尝试调整窗口大小，看看元素如何   内部容器元素调整。

用js来解释如何让它工作的例子。
看看这个小提琴   http://jsfiddle.net/sgsqJ/4/

因为resize（）事件被绑定到具有类＆＃34; test＆＃34;的元素。和   也对窗口对象和窗口对象的resize回调   $（＆＃39; .test＆＃39;）。调用resize（）。

e.g。
$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});

来源：How to detect DIV's dimension changed?

jQuery没有检测到div调整大小

3 个答案: