jquery在div上调整监听器的大小答案

【问题标题】：jquery resize listener on a divjquery在div上调整监听器的大小
【发布时间】：2011-12-24 14:41:21
【问题描述】：

就是这种情况，我有 2 个 div 彼此相邻。一个 div 在高度上是非常动态的，这基本上意味着它可以增长和缩小以适应它的内容。例如，这个 div 包含可以折叠打开或关闭的内容，或者可以展开以适应 ajax 加载的内容的容器。

现在，在这个 div 旁边是另一个通过 css 整齐地跟随第一个高度的 div。效果很好。但这里有个问题：我想根据它的高度来改变第二个 div 的内容。

换句话说，div 1 的大小发生了变化，div 2 跟随 css，我现在需要触发一个 ajax 调用来重新填充 div 2 的新内容，以适应它的新大小。

有人知道我可以如何使用 jquery 来做到这一点吗？如果可能，不使用超时？

干杯。

【问题讨论】：

allmoast duplicate stackoverflow.com/questions/172821/… ，发问题前请先搜索

标签： jquery resize listener

【解决方案1】：

正如the thread poelinca provided 建议的那样，有一些不错的插件可用于此功能。

如果您不喜欢插件的想法，另一个简单的解决方案是在内容被修改时简单地触发 div 上的“resize”事件。然后，您可以使用优雅的observer pattern 按预期使用 resize() 对其进行监视。

function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
   // all your magic resize mojo goes here
});

【讨论】：

谢谢！我完全不反对插件，这就像一种享受！
大家好。我的谈话迟到了，但是您将如何使用这段代码呢？怎么称呼它？
@JeremyMiller 这里的想法是，每当内容更新时，您都会调用 appendContent(...) 方法（毕竟您必须调用一些东西）。在 appendContent 中，您只需触发自己的调整大小事件，指示 div 已调整大小。 $div.bind('resize', ...) 中的代码被自动调用（它监听调整大小事件）
这是有道理的，但是您究竟在哪里添加要检查的选择器？这就是我似乎无法弄清楚的。假设我有一个名为“#dynamic”的 div，它究竟会放在哪里，以便我注意该 div 中的内容？
您需要在一个地方更新内容，并希望在其他地方进行一些不显眼的监控（想想控制反转）； something like this;同样，a plugin 在大多数情况下可能会使它变得更加简单。

【解决方案2】：

https://github.com/sdecima/javascript-detect-element-resize

像魅力一样工作！

我已经测试了 attrchange 但这不起作用，失去了 2 小时的工作:(

【讨论】：

非常好的脚本！目前看到的“唯一”一个不要使用计时器间歇性地轮询元素的大小以检测变化。该技术引入了可怕的性能！谢谢@Jaroslav

【解决方案3】：

我唯一能想到的就是让计时器每隔X 秒检查一次高度。

类似这样的：

function checkHeightTimer(){
    var div1 = $('#div1');
    var div2 = $('#div2');
    var somesize = #somenumber here;
    if(div1.height() > somesize){
        //do something to div2
    }
    setTimeout(checkHeightTimer, 500); //at 500 miliseconds
}

【讨论】：

任何需要定期检查的解决方案都可能被视为不那么优雅的“黑客”，而不是基于事件的解决方案。有时不可避免？