web-dev-qa-db-ja.com

jQuery resizeイベントが発生しない

なんらかの理由で次のようになります。

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

ページが読み込まれたときにのみイベントを発生させます。ブラウザウィンドウのサイズを変更しても、SafariとFirefoxのどちらでも機能しません。他のブラウザでは試していません。

アイデアや回避策はありますか？

javascriptjquerywindow-resize
15
brettish

あなたの警告が問題を引き起こしていると思います代わりにこれを試してください

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

jsfiddle

11
mcgrailm

ウィンドウのサイズ変更や本文のスクロールなど、大量のトリガーを生成する可能性のあるイベントにアタッチしないことをお勧めします。これらのイベントからフラッディングするより良い方法は、タイマーを使用してイベントが発生したかどうかを確認し、適切なアクションを実行することです。 、 このようなもの：

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

タイマーを使用してそれを行うもう1つの利点は、チェックする頻度を完全に制御できることです。これにより、ページの追加機能を考慮する必要がある場合に柔軟性が得られます。

11
Kris Ivanov

任意のブラウザで動作します：

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

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

5年後...

私がこの問題を抱えている唯一のブラウザはChromeです。 Safariを持っていません。

私が気付いたパターンは、コードをinlineすると機能することです。

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

しかし、notを別の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=開発チームによって組み込まれたある種の「保護」であると推測できますが、それはばかげて迷惑です。少なくとも、同じドメインを使用してこれを回避することができた可能性があります。ポリシー」。

pdateしばらく$(document).ready()を使用して修正すると思っていましたが、どうやら間違っていました。

1
bart

私は同じ問題を抱えていて、あらゆる種類の解決策を見て、うまくいきませんでした。

いくつかのテストを行ったところ、少なくとも私の場合、$（window）.resizeはその前の$（document）.ready（）でのみトリガーされることに気付きました。 $（function（））;ではありませんまた、$（window）.ready（）;

だから私のコードは今：

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

...そして注意喚起さえ！

0
Reitz

試す

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

ブラウザ全体で一貫してサイズ変更を起動するドキュメントだと思います。しかし、私は今、普段何をしているかを確認するために仕事をしていません。

0
James Khoury