событие изменения размера jQuery не запускается

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

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

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

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

12
javascript jquery window-resize

6 ответов

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

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

jsfiddle

8

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

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

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

11

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

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

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

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

единственный браузер, с которым у меня есть эта проблема, - это Chrome; у меня нет Safari.

шаблон, который я заметил, заключается в том, что он работает, когда я inline код:

<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() исправил, но, видимо, я ошибался.

1

попробовать 

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

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

0

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

делая некоторые тесты, я заметил, что $(окно).изменение размера, по крайней мере, в моем случае, будет запускаться только с помощью $(document).готов (), прежде чем он. Не $(function ()); ни $(window).ready();

Итак, мой код теперь:

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

...и даже бдительная работа!

0