Событие изменения размера jQuery не срабатывает

По какой-то причине следующее:

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

запускает событие только при загрузке страницы. Изменение размера окна браузера ничего не делает в Safari и Firefox. Я не пробовал его ни в каких других браузерах.

Любые идеи или обходные пути?

Ответ 1

Я думаю, что ваше предупреждение вызывает проблему, попробуйте это вместо

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

jsfiddle

Ответ 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);
});

Еще одно преимущество, использующее таймер, - это полный контроль над тем, как часто проверять, что позволяет вам гибко, если вам нужно рассмотреть любые дополнительные функции на странице

Ответ 3

работает в любом браузере:

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

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

Ответ 4

5 лет спустя...

Единственным браузером, с которым я столкнулся, является 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>

где script содержит

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

Я могу только догадываться, что это какая-то "защита", встроенная командой разработчиков Chrome, но это глупо и раздражает. По крайней мере, они могли бы позволить мне обойти это, используя некоторую "ту же политику домена".

Обновить какое-то время, я думал, используя $(document).ready(), исправил его, но, видимо, я ошибся.

Ответ 5

попробуйте

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

Я думаю, что это документ, который постоянно меняет размер в браузерах. Но сейчас я не работаю, чтобы проверить, что я обычно делаю.

Ответ 6

У меня была такая же проблема, я видел все виды решений и не работал.

Сделав несколько тестов, я заметил, что $(window).resize, по крайней мере в моем случае, будет запускаться только с $(document).ready() перед ним. Не $(функция()); ни $(window).ready();

Итак, мой код:

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

... и даже работа с оповещениями!