jQuery调整大小事件未触发

Question

由于某种原因，以下内容：

$(function() {
  $(window).resize(function() {
    alert("resized!");
  });
});

仅当页面加载时才会触发事件。在Safari和Firefox中调整浏览器窗口大小无效。我没有在其他浏览器上尝试过。

有什么想法或解决方法吗？

- brettish

---

很遗憾，因为我也遇到了这个问题，但我没有resize()命名空间冲突。我使用Visual Studio调试调用堆栈，它来自浏览器，而不是我的代码库中的一行代码。我有一个hacky的解决方法，所以我会继续前进，但我认为其他人也报告了这种行为问题，所以这个问题还是有点东西的。 - Marcus Pope

我的hacky解决方法是在dom加载时初始化一个临时变量为true，并且如果临时变量为true，则将其设置为false并退出resize闭包函数。 - Marcus Pope

Answer 1

我认为你的警报会导致问题，尝试使用这个替代方案

 $(window).resize(function() {
   $('body').prepend('<div>' + $(window).width() + '</div>');
 });

jsfiddle

- mcgrailm

---

我也尝试过这个（来自jQuery resize()文档），它在页面加载（或重新加载）时显示初始宽度，但当我调整浏览器窗口大小时没有任何反应。唉。 - brettish

@brettish，你有其他可能影响事情的JS / jQuery吗？你在错误控制台中收到错误消息吗？ - mcgrailm

@mcgrailm 可能有一些东西影响了它...但是没有错误消息。我将尝试隔离为什么它在我的页面上不起作用，但在balexandre发布的链接中起作用。 - brettish

代码中还有其他问题导致了混乱，我应该早点发现。请查看我在问题上留下的评论以了解原因。感谢您的帮助！ - brettish

@brettish 很高兴你找到了问题所在。别太自责了，每个人都会犯错。 - mcgrailm

Answer 2

最好避免附加到可能生成大量触发的事件，例如窗口调整大小和正文滚动，更好的方法是使用计时器并验证是否发生了事件，然后执行适当的操作，类似于以下内容：

$(function() {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();

    setInterval(function () {
        if ((width != $window.width()) || (height != $window.height())) {
            width = $window.width();
            height = $window.height();

            alert("resized!");
        }
    }, 300);
});

使用计时器进行操作的另一个优点是，您可以完全控制检查频率，这使得如果您需要考虑页面中的任何其他功能，可以灵活调整。

- Kris Ivanov

---

这个解决方案会每300毫秒运行一次setInterval闭包，这对于高性能站点来说不是最优秀的方法。这里有一个更好的方法来解决这个问题：http://www.marcuspope.com/better-resize-event-handler - Marcus Pope

这是 Marcus Pope 提供的代码的 JSFiddle 链接（以防万一它被删除）。链接在此：http://jsfiddle.net/v7LN6/。 - Hanna

在过去的几年中，最佳实践是订阅事件并使用 throttle 来避免过度处理。https://lodash.com/docs#throttle - Kris Ivanov

你可以将节流函数与窗口调整大小一起使用，这样只有在窗口被调整大小且处理程序在最近的300毫秒内未执行时才会触发事件。 - santiago arizti

谢谢@MarcusPope，这是我迄今为止看到的最佳方法。 - blackem

@MarcusPope KING - Ali Al Amine

Answer 3

在任何浏览器中都可运行：

http://jsbin.com/uyovu3/edit#preview

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});

- balexandre

---

当我使用链接时，它可以工作。但是当我将其用于我的页面时，它就无法工作了。我需要找出是我的页面有什么问题导致它无法工作。 - brettish

Answer 4

五年后...

我遇到这个问题的唯一浏览器是Chrome，我没有使用Safari。

我注意到的模式是当我将代码内联时它可以工作：

<script type="text/javascript">
    $(window).resize(function(e) { console.log("resize inline", +new Date()) });
</script>

但是，如果我将它放在一个单独的JavaScript文件中并使用以下方式加载，则不起作用：

<script type="text/javascript" src="/js/resized.js"></script>

脚本包含的位置

console.log('script loaded');
$(window).resize(function(e) { console.log("resize in script file", +new Date()) });

我只能猜测这是Chrome开发团队内置的某种“保护”机制，但这很愚蠢和恼人。至少他们可以让我使用一些“相同域策略”来绕过它。

更新：一段时间以来，我认为使用$(document).ready()修复了它，但显然我错了。

- bart

Answer 5

尝试

$(document).resize(function(){ ... };);

我认为是文档在各种浏览器中一致触发了resize事件。但是我现在不在工作岗位上，无法检查我通常做的事情。

- James Khoury

---

这在IE9中根本不触发。 - Marcus Pope

Answer 6

试试这段代码。

window.addEventListener("resize", function(){
    console.log('yeap worked for me!');
})

- Javohir Karimov

Answer 7

标准

$(window).bind("resize",function(){
console.log(window.innerWidth);
})

适用于WordPress

jQuery(window).bind("resize",function(){
console.log(window.innerWidth);
})

- Murat Kezli

Answer 8

我曾经遇到同样的问题，看了各种解决方案都不起作用。

经过一些测试，我发现$(window).resize在我的情况下只有在$(document).ready()之前才会触发。而不是$(function())或$(window).ready()。

所以我的代码现在是：

$(document).ready(function(){
  $(window).resize(function(){
      // refresh variables
      // Apply variables again
  });
});

......甚至警报也能工作！

- Reitz