Jquery .on (‘scroll’) ne déclenche pas l’événement pendant le défilement

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

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

Vous avez probablement oublié de donner # avant l’id pour le sélecteur d’ID, vous devez donner # avant que l’ id c’est à dire ulId

Vous avez probablement besoin de lier un événement de défilement sur div qui contient les ul et scrolls. 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 fait pas surface dans DOM, qui est utilisé pour la délégation d’événements, consultez 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 en utilisant jquery, vous pouvez le faire en utilisant la capture d’événements avec le script java document.addEventListener , et voyez comment le bouillonnement et la capture fonctionnent dans ce tutoriel .

Démo 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 un événement de défilement directement à ul au lieu de le déléguer via un document .

Démo en direct

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

La liaison de l’événement scroll après le chargement de ul à l’aide d’ajax a résolu le problème. Dans mes découvertes, $ (document) .on (‘scroll’, ‘#id’, function () {…}) ne fonctionne pas et lie l’événement scroll après que le chargement ajax ait fonctionné.

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

Vous pouvez dissocier l’événement après avoir supprimé ou remplacé l’ul.

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

En utilisant VueJS, j’ai essayé toutes les méthodes de cette question, mais aucune n’a fonctionné. Donc, si quelqu’un se débat de la même manière:

 mounted() { $(document).ready(function() { //< <====== wont work without this $(window).scroll(function() { console.log('logging'); }); }); }, 
 $("body").on("custom-scroll", ".myDiv", function(){ console.log("Scrolled :P"); }) $("#btn").on("click", function(){ $("body").append('


Content1



Content2



'); listenForScrollEvent($(".myDiv")); }); function listenForScrollEvent(el){ el.on("scroll", function(){ el.sortinggger("custom-scroll"); }) }

Voir cet article – Bind scroll Event To Dynamic DIV?

Une autre option pourrait être:

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

Référence: ici

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

Ensuite, vous pouvez utiliser:

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

remplacer évidemment ulId avec quel que soit l’identifiant réel de la div scrollable.

Ensuite, définissez l’affichage css: block; sur le #ulId (ou contenant div) lors du chargement?

Je sais que c’est assez vieux, mais j’ai résolu un problème comme celui-ci: j’avais un élément parent et enfant défilant.

  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 eu, c’est que je ne savais pas quand l’enfant était chargé dans DOM, mais j’ai continué à le vérifier toutes les secondes.

REMARQUE: ceci est utile si cela se produit rapidement mais pas immédiatement après le chargement du document, sinon les clients utiliseront la puissance de calcul sans raison.