événement de redimensionnement jQuery ne se déclenche pas

Pour quelque raison que ce soit le suivant:

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

ne se déclenche un événement lorsque la page est chargée. Le redimensionnement de la fenêtre du navigateur ne fait rien dans les deux Safari et Firefox. Je ne l'ai pas essayé sur tout les autres navigateurs.

Des idées ou une solution de contournement?

source d'informationauteur brettish

  1. 8

    Je pense que votre alerte est à l'origine du problème essayez plutôt ceci

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

    jsfiddle

  2. 11

    il est préférable d'éviter de joindre à des événements qui pourraient potentiellement générer beaucoup de déclenchement tels que la fenêtre de redimensionnement et le corps de défilement, une meilleure approche que les inondations de ces événements est d'utiliser une minuterie et de vérifier si le même a eu lieu, puis d'exécuter l'action appropriée, quelque chose comme ceci:

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

    un autre avantage de le faire à l'aide de la minuterie est vous avez le plein contrôle de la fréquence de vérification, ce qui permet une certaine souplesse si vous avez d'examiner toutes les autres fonctionnalités de la page

  3. 3

    fonctionne dans n'importe quel navigateur:

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

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

    5 ans plus tard...

    Le seul navigateur que j'ai ce problème avec Chrome, je n'ai pas Safari.

    Le modèle que j'ai remarqué, c'est que ça fonctionne quand je inline le code:

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

    mais pas quand je l'ai mis dans un autre fichier Javascript que je charge avec:

    <script type="text/javascript" src="/js/resized.js"></script>

    où le script contient

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

    Je ne peux que deviner ce est une sorte de "protection" construit par l'équipe de développement de google Chrome, mais c'est stupide et ennuyeux. Ils auraient pu au moins me laisser ignorer ce à l'aide de quelques "même domaine politique".

    Mise à jour pendant un moment j'ai pensé à l'aide de $(document).ready() fixe, mais apparemment je me trompais.

  5. 0

    essayer 

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

    Je pense que c'est le document que les feux de la redimensionner de manière cohérente sur tous les navigateurs. Mais je ne suis pas au travail dès maintenant pour vérifier ce que je fais habituellement.

  6. 0

    J'étais avec le même problème, vu toutes sortes de solutions et n'a pas de travail.

    Faisant quelques tests, j'ai remarqué que le $(window).redimensionner, au moins dans mon cas, n'entraîneraient avec $(document).prêt() avant. Pas $(function()); ni $(window).prêt();

    Donc mon code est maintenant:

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

    ...et même une alerte de travail!