Jquery.(défilement) déclenche pas le cas lors du défilement
événement Scroll n'est pas de tir pendant le défilement de la ul . J'utilise la version 1.10.2 de jQuery. Comme je charge le ul à partir d'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');
});
7 réponses
vous avez probablement oublié de donner # avant id pour le sélecteur d'id, vous devez donner # avant id ie est ulId
Vous devez probablement lier l'événement scroll sur div qui contient l'ul et les rouleaux. Vous devez lier l'événement avec div au lieu de ul
$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
console.log('Event Fired');
});
Modifier
le ci-dessus ne fonctionnerait pas parce que l'événement scroll ne fait pas de bulle dans DOM qui est utilisé pour la délégation d'événement, voir cette question pourquoi ne pas délégué travailler pour scroll?
Mais avec les navigateurs modernes > IE 8, vous pouvez le faire par d'autres. Au lieu de déléguer en utilisant jquery vous pouvez le faire en utilisant la capture d'événement avec le script java document.addEventListener , voir comment le barbotage et la capture fonctionnent dans ce tutorial .
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 scroll directement à l'ul au lieu de le déléguer via document .
$("#idOfUl").on( 'scroll', function(){
console.log('Event Fired');
});
liant l'événement scroll après que l'ul a chargé en utilisant ajax a résolu le problème. Dans mes conclusions $(document).( 'scroll', '#id', function () {...}) ne fonctionne pas et ne lie pas l'événement scroll après que la charge ajax ait fonctionné.
$("#ulId").bind('scroll', function() {
console.log('Event worked');
});
vous pouvez dégrafer l'événement après avoir enlevé ou remplacé l'AMT.
J'espère que ça peut aider quelqu'un.
en utilisant VueJS j'ai essayé toutes les méthodes dans cette question mais aucune n'a fonctionné. Donc, au cas où quelqu'un se bat whit la même chose:
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('<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 ce post - lier l'événement scroll à 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 la charge ajax (avec l'affichage css: none;), ou l'envelopper dans un div contenant (avec l'affichage CSS: none;), puis il suffit de charger le html interne pendant la charge de page ajax, de cette façon l'événement de défilement sera lié à la div qui est déjà là avant l'ajax?
ensuite vous pouvez utiliser:
$('#ulId').on('scroll',function(){ console.log('Event Fired'); })
remplace évidemment ulId par quelque soit l'id réel de la div.
puis Définir CSS display: block; sur le #ulId (ou contenant div) lors de la charge?
je sais que c'est très vieux, mais j'ai résolu le problème comme ça: J'ai eu le parent et l'enfant de l'élément a été déplacé.
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 est que je ne savais pas quand L'enfant est chargé à DOM, mais j'ai continué à vérifier chaque seconde.
NOTE: Ceci est utile si cela arrive bientôt mais pas juste après la charge du document, sinon il utilisera la puissance de calcul des clients sans raison.