web-dev-qa-db-fra.com

Jquery .on ('scroll') ne déclenche pas l'événement lors du défilement

L'événement de défilement ne se déclenche pas lorsque vous faites défiler la ul. J'utilise jQuery version 1.10.2. Comme je charge le ul depuis une page ajax, je ne pouvais pas utiliser $('ulId').on('scroll', function() {}); ou d’autres méthodes en direct. S'il vous plaît, aidez-moi à trouver une solution.

$(document).on( 'scroll', '#ulId', function(){
    console.log('Event Fired');
});
jqueryeventsscroll
63
ABHILASH SB

Vous avez probablement oublié de donner # avant id pour le sélecteur d'id, vous devez donner # avant id c'est-à-dire ulId

Vous aurez probablement besoin de lier un événement de défilement sur une div qui contient ul et scroll. Vous devez lier l'événement avec div au lieu de ul

$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
    console.log('Event Fired');
});

Modifier

Ce qui précède ne fonctionnerait pas car l'événement de défilement ne s'affiche pas dans le DOM utilisé pour la délégation d'événements. Voir cette question pourquoi ne pas déléguer le travail pour le défilement?

Mais avec les navigateurs modernes> IE 8, vous pouvez le faire autrement. Au lieu de déléguer à l'aide de jQuery, vous pouvez le faire à l'aide de la capture d'événement avec Java script document.addEventListener, avec le troisième argument sous la forme true; Voyez comment le bouillonnement et la capture fonctionnent dans ce tuturial .

démonstration en direct

document.addEventListener('scroll', function (event) {
    if (event.target.id === 'idOfUl') { // or any other filtering condition        
        console.log('scrolling', event.target);
    }
}, true /*Capture event*/);

Si vous n'avez pas besoin de délégation d'événement, vous pouvez lier l'événement de défilement directement au ul au lieu de le déléguer via document.

démonstration en direct

$("#idOfUl").on( 'scroll', function(){
   console.log('Event Fired');
});
63
Adil

La liaison de l'événement de défilement après le chargement du fichier ul à l'aide de ajax a résolu le problème. Dans mes conclusions, $ (document) .on ('scroll', '#id', function () {...}) ne fonctionne pas et lie l'événement scroll après le chargement ajax qui a fonctionné.

$("#ulId").bind('scroll', function() {
   console.log('Event worked');
});

Vous pouvez dissocier l'événement après avoir retiré ou remplacé l'ul.

J'espère que ça peut aider quelqu'un.

23
ABHILASH SB

À l’aide de VueJS, j’ai essayé toutes les méthodes de cette question, mais aucune n’a fonctionné. Donc, au cas où quelqu'un se débat avec le même problème:

mounted() {
  $(document).ready(function() { //<<====== wont work without this
      $(window).scroll(function() {
          console.log('logging');
      });
  });
},
11
juliangonzalez

Une autre option pourrait être:

$("#ulId").scroll(function () { console.log("Event Fired"); })

Référence: Here

4
MatayoshiMariano
$("body").on("custom-scroll", ".myDiv", function(){
    console.log("Scrolled :P");
})

$("#btn").on("click", function(){
    $("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
    listenForScrollEvent($(".myDiv"));
});


function listenForScrollEvent(el){
    el.on("scroll", function(){
        el.trigger("custom-scroll");
    })
}

voir cet article - Bind scroll Event To Dynamic DIV?

2
vipin8169

Pouvez-vous placer le #ulId dans le document avant le chargement ajax (avec display css: none;), ou l'enrouler dans un div contenant (avec css display: none;), puis chargez le code HTML intérieur pendant le chargement de page ajax, de cette façon, l'événement de défilement sera lié au div qui est déjà là avant l'ajax?

Ensuite, vous pouvez utiliser:

$('#ulId').on('scroll',function(){ console.log('Event Fired'); })

évidemment, remplacer ulId par quelque soit l'identifiant réel de la div à défilement.

Puis définissez css display: block; sur le #ulId (ou contenant div) lors du chargement?

0
IIIOXIII

Je sais que c'est une chose assez ancienne, mais j'ai résolu le problème de cette façon: j'avais un élément parent et enfant qui pouvait défiler.

   if ($('#parent > *').length == 0 ){
        var wait = setInterval(function() {
            if($('#parent > *').length != 0 ) {
                $('#parent .child').bind('scroll',function() {
                  //do staff
                });
                clearInterval(wait);
            },1000);
        }

Le problème que j'ai, c'est que je ne savais pas quand l'enfant était chargé dans DOM, mais je vérifiais chaque seconde.

REMARQUE: cela est utile si cela se produit rapidement, mais pas juste après le chargement du document, sinon le système utilisera la puissance de calcul du client sans raison.

0
Riiwo