jQuery resize event not firing

For whatever rea开发者_如何转开发son 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.

Any ideas or workaround?

I think your alert is causing a problem try this instead

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

jsfiddle

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

works in any browser:

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

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

5 years later...

The only browser I have this problem with, is Chrome; I don't have Safari.

The pattern I noticed is that it works when I inline the code:

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

but not when I put it in a separate Javascript file that I load with:

<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".

Update for a while I thought using $(document).ready() fixed it, but apparently I was wrong.

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.

Try this code.

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

Standart

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

For Wordpress

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

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();

So my code now is:

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

...and even an alert work!