调整窗口大小后重新计算高度答案

【问题标题】：Recalculate height after window resize调整窗口大小后重新计算高度
【发布时间】：2012-12-22 00:19:31
【问题描述】：

我创建了一个函数，当我将鼠标悬停在父对象上时会显示“语音气泡”。然而，气泡被设置为显示在父对象上方，由其高度计算得出。

我正在尝试将其应用到响应式设计中，因此宽度和高度都是动态的。我尝试在窗口调整大小后使用以下代码运行该函数：

$(window).resize(function() {
    $('.popup').popup();
}).trigger('resize');

这似乎可以解决问题，但它有很多问题。您可以通过查看this jsfiddle I put together 来了解我的意思。

在调整窗口大小之前，对话气泡可以正常工作，但是一旦调整大小并且您将鼠标悬停在其中一个触发器对象上，对话气泡就会以大约 5 次左右的重复进行动画处理。

毫无疑问，这最初不是为响应式设计而编写的，而且我不是一个 JS 开发人员，所以如果有人看到任何可以做出的明显改进，我会很乐意接受它们！ :D

【问题讨论】：

【解决方案1】：

这是因为 popup() 不止一次地绑定到事件。就用这个。

$(document).ready(function() {
$('.popup').popup();
});

并且，设置鼠标悬停时弹出窗口的位置。

【讨论】：

这对我不起作用。一旦父容器的高度发生变化，对话气泡就不再位于正确的位置。因此，为什么我在窗口调整大小事件中运行该函数。这在我原来的 jsfiddle 中有点难以注意到，因为我在父容器中只有“Lorem Ipsum”，并且在第二个字符掉到下一行之前高度不会改变。
那么您必须在鼠标悬停时设置弹出窗口的顶部和左侧位置。这将解决您的问题。但是，如果你在 window.resize 中调用这个函数，它会一次又一次地被绑定。
哦！所以我只需要在 mouseover() 函数中设置我的高度变量？呸！这太容易了！它有效！呃，这让我很生气。但我也很高兴。哈哈，谢谢你的帮助！
是的...只需更新鼠标悬停功能以设置弹出 div 的位置。初始化时不要设置位置。

【解决方案2】：

删除 -

$(window).resize(function () {
    $('.popup').popup();
  }).trigger('resize');

然后添加

  $('.popup').popup();

【讨论】：

这不起作用，原因与我向@Pitchai 提到的相同 - 当容器的高度发生变化时，对话气泡不再位于正确的位置。
你看到了吗 - jsfiddle.net/im4aLL/jMG4K/2 它在那里工作。告诉我你使用的是哪个浏览器
如果您阅读我和@Pitchai 之间的评论线程，您就会明白为什么这不起作用。在您的 jsfiddle 中，尝试缩小窗口，直到文本变为两行。对话气泡不再显示在正确的位置。