Javascript jQuery调整大小事件未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5683377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery resize event not firing
提问by brettish
For whatever reason the following:
无论出于何种原因，以下内容：
$(function() {
$(window).resize(function() {
alert("resized!");
});
});
only fires an event when the page is loaded. Resizing the browser window does nothing in both Safari and Firefox. I have not tried it on any other browsers.
仅在页面加载时触发事件。调整浏览器窗口大小在 Safari 和 Firefox 中都不起作用。我还没有在任何其他浏览器上尝试过。
Any ideas or workaround?
任何想法或解决方法？
采纳答案by mcgrailm
回答by Kris Ivanov
it is best to avoid attaching to events that could potentially generate lots of triggering such as the window resize and body scroll, a better approach that flooding from those events is to use a timer and verify if the even has occurred, then execute the proper action, something like this:
最好避免附加到可能产生大量触发的事件，例如窗口调整大小和身体滚动，从这些事件中泛滥的更好方法是使用计时器并验证是否发生了偶数，然后执行适当的操作，像这样：
$(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);
});
another advantage doing it using timer is you have full control of how often to check, which allows you flexibility if you have to consider any additional functionality in the page
使用计时器的另一个优势是您可以完全控制检查的频率，如果您必须考虑页面中的任何其他功能，这可以让您灵活
回答by balexandre
works in any browser:
适用于任何浏览器：
http://jsbin.com/uyovu3/edit#preview
http://jsbin.com/uyovu3/edit#preview
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
回答by bart
5 years later...
5年后...
The only browser I have this problem with, is Chrome; I don't have Safari.
我遇到这个问题的唯一浏览器是 Chrome；我没有 Safari。
The pattern I noticed is that it works when I inlinethe code:
我注意到的模式是当我内联代码时它起作用：
<script type="text/javascript">
$(window).resize(function(e) { console.log("resize inline", +new Date()) });
</script>
but notwhen I put it in a separate Javascript file that I load with:
但不是当我把它放在一个单独的JavaScript文件，我加载使用：
<script type="text/javascript" src="/js/resized.js"></script>
where the script contains
脚本包含的地方
console.log('script loaded');
$(window).resize(function(e) { console.log("resize in script file", +new Date()) });
I can only guess this is some kind of "protection" built in by the Chrome development team, but it is silly and annoying. At least they could have let me bypass this using some "same domain policy".
我只能猜测这是 Chrome 开发团队内置的某种“保护”，但它既愚蠢又烦人。至少他们可以让我使用一些“相同的域策略”绕过它。
Updatefor a while I thought using $(document).ready()fixed it, but apparently I was wrong.
更新了一段时间我以为使用$(document).ready()修复了它，但显然我错了。
回答by James Khoury
try
尝试
$(document).resize(function(){ ... };);
I think its the document that fires the resize consistently across browsers. But I'm not at work now to check what I usually do.
我认为它是跨浏览器一致触发调整大小的文档。但我现在不在工作，检查我通常做的事情。
回答by Javohir Karimov
Try this code.
试试这个代码。
window.addEventListener("resize", function(){
console.log('yeap worked for me!');
})
回答by Reitz
I was with the same problem, saw all kind of solutions and didn't work.
我遇到了同样的问题，看到了各种解决方案，但没有奏效。
Making some tests I noticed that the $(window).resize, at least in my case, would only trigger with $(document).ready() before it. Not $(function()); nor $(window).ready();
进行一些测试时，我注意到 $(window).resize，至少在我的情况下，只会在 $(document).ready() 之前触发。不是 $(function()); 也没有 $(window).ready();
So my code now is:
所以我现在的代码是：
$(document).ready(function(){
$(window).resize(function(){
// refresh variables
// Apply variables again
});
});
...and even an alert work!
...甚至警报工作！
