Событие прокрутки не запускается при прокрутке ul. Я использую jQuery версии 1.10.2. Когда я загружаю ul с страницы ajax, я не мог использовать $('ulId').on('scroll', function() {}); или другие методы live. Пожалуйста, помогите мне найти решение.
$(document).on( 'scroll', '#ulId', function(){
console.log('Event Fired');
});
Вы, вероятно, забыли дать # перед идентификатором для селектора идентификаторов, вам нужно дать # перед id, т.е. будет ulId
Вероятно, вам нужно привязать событие прокрутки к div, который содержит ul и scrolls. Вам нужно связать событие с div вместо ul
$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
console.log('Event Fired');
});
Изменить
Выше не будет работать, потому что событие прокрутки не всплывает в DOM, который используется для делегирования события, см. этот вопрос почему не делегировать работу для прокрутки?
Но с современными браузерами> IE 8 вы можете сделать это другим способом. Вместо делегирования с использованием jquery вы можете сделать это с помощью захвата событий с помощью java-скрипта document.addEventListener с третьим аргументом как true; Посмотрите, как пузыри и захвата работают в этом учебнике.
document.addEventListener('scroll', function (event) {
if (event.target.id === 'idOfUl') { // or any other filtering condition
console.log('scrolling', event.target);
}
}, true /*Capture event*/);
Если вам не нужно делегировать событие, вы можете привязать событие прокрутки непосредственно к ul, а не делегировать его через document.
$("#idOfUl").on( 'scroll', function(){
console.log('Event Fired');
});
Привязка события прокрутки после загрузки пользователем с использованием ajax решила проблему. В моих выводах $(document).on('scroll', '#id', function() {...}) не работает и не связывает событие прокрутки после того, как найденная работа ajax работает.
$("#ulId").bind('scroll', function() {
console.log('Event worked');
});
Вы можете отменить событие после удаления или замены ul.
Надеюсь, это может помочь кому-то.
Используя VueJS, я пробовал каждый метод в этом вопросе, но никто не работал. Поэтому, если кто-то борется с тем же:
mounted() {
$(document).ready(function() { //<<====== wont work without this
$(window).scroll(function() {
console.log('logging');
});
});
},
Другой вариант:
$("#ulId").scroll(function () { console.log("Event Fired"); })
Ссылка: Здесь
$("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");
})
}
см. этот пост - Связать прокрутку события с динамическим DIV?
Можете ли вы поместить #ulId в документ до загрузки ajax (с помощью css display: none;) или обернуть его в содержащий div (с помощью css display: none;), а затем просто загрузить внутренний html во время ajax загрузка страницы, таким образом событие прокрутки будет связано с div, который уже существует до ajax?
Затем вы можете использовать:
$('#ulId').on('scroll',function(){ console.log('Event Fired'); })
очевидно, заменяя ulId любым действительным идентификатором прокручиваемого div.
Затем установите css display: block; на #ulId (или содержащий div) при загрузке?
Я знаю, что это довольно старая вещь, но я решил такую проблему: У меня родительский и дочерний элементы прокручивались.
if ($('#parent > *').length == 0 ){
var wait = setInterval(function() {
if($('#parent > *').length != 0 ) {
$('#parent .child').bind('scroll',function() {
//do staff
});
clearInterval(wait);
},1000);
}
Проблема была в том, что я не знал, когда ребенок загружается в DOM, но я продолжал проверять его каждую секунду.
ПРИМЕЧАНИЕ. Это полезно, если это произойдет в ближайшее время, но не сразу после загрузки документа, иначе он будет использовать вычислительную мощность клиентов без причины.