Le script jQuery se déclenche deux fois ? Peut-être que l'événement en direct se déclenche deux fois?

Question

Je construis une application en utilisant la dernière version de PhoneGap, jQM et jQuery 1.8.0. Jusqu'ici tout va bien sauf pour ce petit problème ennuyeux que j'ai rencontré.

J'ai mon fichier show.html lié à l'index.html qui contient le code suivant:

 contient la barre de recherche et le bouton de soumission 

La balise ul est vide car la liste sera ajoutée dynamiquement avec ajax lorsqu'on cliquera sur le bouton de soumission. Je ne voulais pas afficher la div #list au début donc j'ai mis l'affichage à none.

Donc ça fonctionne bien, quand on clique sur le bouton de soumission, cela envoie une requête ajax au serveur et ajoute les éléments à la liste. Il masque également la div de recherche. Ça marche bien aussi!

Maintenant le problème arrive lorsque j'ai ajouté une fonction window.scroll pour détecter quand le bas de la page est atteint.

Voici mon code jQuery:

$(document).on("pageshow", "#pageID", function() {
    $("#submit").click(function() {
        $.ajax({
                success: function(data, status){
                  $('#search').hide();
                  $('#list').show();
                //ajouter à la div de liste et rafraîchir la liste ici
                }
        });
    });
    //détecte le bas de la page
    $(window).scroll(function () {
        if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height()))) {       
            console.log('fin de la page');
                        lastPostFunc(); //fonction de défilement infini
        } 
    });  
});

Cela affiche 'fin de la page' deux fois dans la console Firebug! Ce script se trouve entre les balises head.

Y a-t-il un moyen de le faire imprimer une seule fois? J'ai besoin de cela car j'ai mis en place ma propre fonction de défilement infini et le problème cause ma requête ajax de se poster deux fois au serveur. La fonction fonctionne très bien mais n'est pas la cause du problème car même lorsque j'ai commenté lastPostFunc(), cela imprime toujours deux fois dans la console!!

Modifier: Personnellement, je ne pense pas que les réponses données jusqu'à présent sont fausses, elles sont correctes mais elles ne m'aident pas à résoudre le problème. Peut-être que je dois reformuler les choses de manière plus claire. J'ai copié mon code et collé sur une page autonome, cela n'imprime qu'une seule fois, donc mon code n'a en fait aucun défaut et il fonctionne comme il se doit.

Par conséquent, je me demandais s'il y avait autre chose qui le faisait imprimer deux fois après la soumission du formulaire. Mon formulaire et ma page de résultats sont SUR la même page. Cela signifie-t-il que cela a provoqué le déclenchement de l'événement en direct deux fois? Causant ainsi l'impression deux fois dans la console lors de la page show? Si je suis correct, y a-t-il un moyen de contourner cela et de le faire imprimer UNE SEULE fois?

Toute aide est appréciée. Merci beaucoup!

Answer 1

D'accord j'ai enfin résolu ça.

Apparemment tout ce que j'ai à faire c'est d'ajouter cette ligne de code :

    $(window).scroll(function (e) {
        if (reach bottom) {
            e.stopImmediatePropagation();
            console.log('Fin de la page');
        } 
    });

Et ça marche ! Ça a arrêté d'imprimer deux fois pour moi.

Answer 2

Votre fonction écrira en fait la sortie dans la console plus de deux fois. Le problème réside dans votre condition :

if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height())))  

Car à chaque défilement dans cette zone, la condition sera évaluée à vrai. Vous pourriez la changer en :

if ($(window).scrollTop() == ($(document).height() - ($(window).height())))

Answer 3

Peut-être que cela résoudra votre problème

jQuery(window).scroll(function() {
    if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {        
    console.log('test')                                         
    }
}); 

//Mise à jour

    var lastlogtime= null;
jQuery(window).scroll(function() {
        if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {
        if(((lastlogtime+600)<(+new Date())) || (lastlogtime== null)){
            //votre logique de défilement
            console.log('test')         ;
            lastlogtime=    +new Date();                            
            }
        }
    });