web-dev-qa-db-fra.com

jQuery $ (document) .ready () se déclenche deux fois

J'ai donc parcouru le Web en essayant de savoir ce qui se passe ici et je n'ai pas pu obtenir de réponse concrète.

J'ai un $ (document) .ready sur mon site qui semble pouvoir s'exécuter plusieurs fois, quel que soit le code qu'il contient.

J'ai lu dans les rapports de bogues pour jQuery sur le déroulement de l'événement .ready deux fois si une exception se produit dans votre déclaration. Cependant, même lorsque j'ai le code suivant, il est toujours exécuté deux fois:

$(document).ready(function() {
    try{    
        console.log('ready');
        }
    catch(e){
        console.log(e);
    }
});

Dans la console, tout ce que je vois est "prêt" consigné deux fois. Est-il possible qu’une autre personne déjà protégée avec une exception causerait un problème? D'après ce que j'avais compris, tous les tags .ready étaient indépendants les uns des autres, mais je n'arrive pas à trouver où cela entre en jeu?

Voici le bloc de tête pour le site:

<head>
<title>${path.title}</title>
<meta name="Description" content="${path.description}" />
<link href="${cssHost}${path.pathCss}" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="media/js/fancybox/jquery.fancybox.pack.js" type="text/javascript" ><!-- --></script>
<script src="/media/es/jobsite/js/landing.js" type="text/javascript" ><!-- --></script>
<script src="/media/es/jobsite/js/functions.js" type="text/javascript"><!-- -->    </script>
<script src="/media/es/jobsite/js/jobParsing.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="/media/es/jobsite/js/queryNormilization.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="${jsHost}/js/jquery/jquery.metadata.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="${jsHost}/js/jquery/jquery.form.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="${jsHost}/js/jquery.i18n.properties-min.js" type="text/javascript" charset="utf-8"><!----></script>

<script type="text/javascript" charset="utf-8">

function updateBannerLink() {
    var s4 = location.hash.substring(1);
    $("#banner").attr('href','http://INTELATRACKING.ORG/?a=12240&amp;c=29258&amp;s4='+s4+'&amp;s5=^');
}

</script>
</head>

Ne faites pas attention aux variables JSP, mais comme vous pouvez le constater, j'appelle une seule fois le fichier functions.js (c'est là que la fonction .ready existe)

javascriptjqueryjavascript-eventsdocument-ready
67
Xenology

L'événement prêt ne peut pas être déclenché deux fois. Ce qui est plus que probable est que vous avez un code qui déplace ou manipule l'élément dans lequel le code est contenu, ce qui amène le navigateur à réexécuter le bloc de script.

Cela peut être évité en incluant des balises de script dans <head> Ou avant la balise de fermeture </body> Et not en utilisant $('body').wrapInner();. utiliser $('body').html($('body').html().replace(...)); a le même effet.

63
Kevin B

Cela m'est arrivé aussi, mais je me suis rendu compte que le script avait été inclus deux fois à cause d'une mauvaise fusion.

37
Charles HETIER

Cela m'est arrivé lors de l'utilisation de KendoUI ... l'invocation d'une fenêtre contextuelle provoquerait le document.ready événement à déclencher plusieurs fois. La solution simple consiste à définir un indicateur global afin qu’il ne soit exécuté qu’une seule fois:

var pageInitialized = false;
$(function()
{
    if(pageInitialized) return;
    pageInitialized = true;
    // Put your init logic here.
});

C'est un peu bidon, mais ça fonctionne.

31
qJake

Assurez-vous de ne pas inclure le fichier JS deux fois. C'était mon cas

12
kakauandme

essayez de mettre cela dans votre functions.js pour l'empêcher d'être exécuté deux fois:

var checkit = window.check_var;
if(checkit === undefined){ //file never entered. the global var was not set.
    window.check_var = 1;
}
else {
    //your functions.js content 
}

cependant, je suggère que vous examiniez plus pour savoir où vous appelez pour la deuxième fois.

2
Mouna Cheikhna

Vous pourriez envisager d'utiliser

window.onload

au lieu de

$(document).ready
2
hvdd

J'ai eu un problème similaire aujourd'hui. Un <button type="submit"> A provoqué le déclenchement de l'événement $(document).ready(...) dans mon cas. Changer le code en <button type="button"> A résolu le problème pour moi.

Voir fonction document.ready appelée à nouveau après le bouton d'envoi? ici sur stackoverflow pour plus de détails.

1
lominart

Il est possible que vous rencontriez ce problème lorsque vous ajoutez le même contrôleur deux fois dans le code HTML.
Par exemple:
[js]

app.controller('AppCtrl', function ($scope) {
 $(document).ready(function () {
        alert("Hello");
        //this will call twice 
    });
});

[html]

//controller mentioned for the first time
<md-content ng-controller="AppCtrl">
    //some thing
</md-content>

//same controller mentioned again 
<md-content ng-controller="AppCtrl">
    //some thing
</md-content>
1
Charitha Goonewardena

J'ai eu un problème similaire lorsque j'essayais de rafraîchir un partiel. J'ai appelé un retour ActionResult au lieu d'un retour PartialViewResult. ActionResult a provoqué l'exécution de ready () deux fois.

1
user3048613

Dans mon cas, $ (document) .ready s'est déclenché deux fois à cause d'une mauvaise CSS, vérifiez si une partie de votre CSS a background-image: url('');

0
Posis

Si l'iframe n'affiche rien et est utilisé pour d'autres raisons (comme le téléchargement d'un fichier sans rechargement), vous pouvez procéder de la manière suivante:

<iframe id="upload_target" name="upload_target" style="width:0;height:0;border:0px solid #fff;"></iframe>

Notez que src n'est pas inclus, ce qui empêche le second déclencheur prêt à être utilisé sur le document.

0
Alex Sikamiotis

J'ai eu ce problème avec window.load la fonction a été exécutée deux fois: La raison était parce que j'avais la référence au même fichier javascript dans la page principale ainsi qu'un. Usercontrol .net. Lorsque j'ai supprimé la référence dans la page principale, la fonction de chargement n'a été exécutée qu'une fois.

0
Egil Morten Eriksen