Question

我希望每当divs高度发生变化时都会触发控制台消息，所以如果我将jsfiddle结果窗口缩小，我希望控制台日志显示容器div的新高度。

＆＃13;

jQuery('.container').bind('resize', function(){
    console.log( 'Height changed to' + jQuery(this).height() );
});

＆＃13;

.container{
  max-width:300px;
  background:tan;
  padding:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet accumsan pharetra. Ut in ligula non felis ullamcorper pulvinar efficitur ut lacus. Praesent porta, tellus a rutrum molestie, tellus erat ullamcorper felis, et iaculis tellus est sit amet urna. Donec vulputate lobortis ornare. Curabitur tortor erat, euismod et varius ac, tempus eu libero. In accumsan arcu vitae tellus fermentum mattis id eu lorem. Nulla eget iaculis nibh

</div>

＆＃13;

为什么我的例子中没有发生这种情况？

Answer 1

浮动布局更改或更改不是来自jQuery land。您可以使用调整大小检测器，这是一种基于事件的方法，不会浪费您的CPU时间。

https://github.com/marcj/css-element-queries

它包含一个可用于此目的的ResizeSensor类。

new ResizeSensor(jQuery('#mainContent'), function(){ 
    console.log('main content dimension changed');
});

Answer 2

首先调整文档视图大小时触发的事件调整大小并绑定到DOM树的顶部元素。您可以在MDN找到更多信息第二。您可以在此网站上找到许多类似问题的解决方案:)这是example

当div高度改变时，jQuery更新控制台日志

2 个答案: