Fonction qui se répète suite a un scroll

iCreative
Javascript

Bonjour à tous :),

j'ai réalisé une fonction qui est appelée avant un scroll de la page et doit pouvoir etre appellée aprés le scroll de la page (pour les résultats issus du scroll).
Tout marche bien jusqu'a se que la page scroll, car une fois que la page a été scrollée la fonction se répère X fois pour je ne sais quelle raison ?
Pour tester, il suffit de cliquer sur un bouton SANS SCROLLER => scroller la page puis recliquer sur un bouton (exemple vers le bas)...
Comment remédier au probleme, SVP ?

Voici un code d'exemple.... => dispo sur >> http://jsfiddle.net/5mpjtesf/

Merci de votre aide,
Bonne journée


<!DOCTYPE html>
<html lang="FR">
      <head>
            <style type="text/css">
                  .test {
                        height:200px;
                  }
            </style>
      </head>

      <body>
            <?php
                  $nb = 20 ;
                  $i=0 ;
                  while ($i <= $nb) {
                        echo '<button class="test" id="'.$i.'">lien >> '.$i.'</button><br />' ;
                        $i++ ;
                  } // ...
            ?>

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>

            <script type="text/javascript">
            jQuery(function($){
                  // -------------------------------------------------------------
                  $.fn.maFonction = function() {
                        var idDiv = $(this).attr('id'); // on récupère l'ID
                        alert('div ic >> '+idDiv) ;
                  }
                  // -------------------------------------------------------------

                  $('button.test').click(function() {
                          $(this).stop().maFonction(); // appel la fonction
                  });

                  $(window).scroll(function() { // On surveille l'évènement scroll

                        //.....
                        /*
                        fait apparaitre d'autres div (infiniScroll)
                        a partir desquels on doit pouvoir appeller la fonction maFonction()
                        (d'ou le "pourquoi je l'ajoute là" (suis pas sur que ce soit sa place, mais bon ?... )
                        */

                        $('button.test').click(function() {
                                    console.log(this)
                                    $(this).maFonction(); // appel la fonction
                        });
                  });

            });
            </script>
      </body>
</html>

4 réponses

betaWeb
Réponse acceptée

Tu veux dire que tes divs n'exitent pas encore dans le DOM avant de scroller ? Ou elles sont justes en display: none; ?

Tu peux essayer avec la fonction on('click') en lieu et place de la fonction click() (et virer le plugin jQuery $.fn.maFonction() qui ne sert à rien):

$(window).scroll(function() { // On surveille l'évènement scroll
  //.....
  /*
  fait apparaitre d'autres div (infiniScroll)
  a partir desquels on doit pouvoir appeller la fonction maFonction()
  (d'ou le "pourquoi je l'ajoute là" (suis pas sur que ce soit sa place, mais bon ?... )
  */
});

$('body').on('click', '.test', function() {
    var idDiv = $(this).attr('id'); // on récupère l'ID
    alert('div id >> ' + idDiv) ;
});
betaWeb

Salut,

Oui évidemment, puisque l'event scroll() est appelé à partir du moment où la page est ou a été scollée, même si l'utilisateur n'est plus entrain de le faire.
Pourquoi déclarer l'event click dans le callback de la fonction scroll() ? Quel en est l'intérêt ?

iCreative
Auteur

Bonjour,
Merci pour ton aide,

Pourquoi déclarer l'event click dans le callback de la fonction scroll() ? Quel en est l'intérêt ?

car le scroll affiche de nouveaux div contenant des boutons ayant la class test dans lesquels j'ai besoin de la fonction maFonction();
Si je ne redéclare pas la fonction les nouveaux div n'ont pas maFonction() opérationnelle .

aurais tu une idée de comment faire pour remédier au probléme ?

Merci

iCreative
Auteur

Tu veux dire que tes divs n'exitent pas encore dans le DOM avant de scroller ?

Oui c'est bien ca .
Je viens de tester ta solution et ca marche impecablement bien !!!
Je pensais que c'est mieux de le déclarer dans une fonction ?!^^

Mais dans en tous cas ca marche, merci bien :)

bonne journée !