JQuery.on('scroll') не запускает событие при прокрутке

Событие прокрутки не запускается при прокрутке ul. Я использую jQuery версии 1.10.2. Когда я загружаю ul с страницы ajax, я не мог использовать $('ulId').on('scroll', function() {}); или другие методы live. Пожалуйста, помогите мне найти решение.

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

Ответы

Ответ 1

Вы, вероятно, забыли дать # перед идентификатором для селектора идентификаторов, вам нужно дать # перед 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');
});

Ответ 2

Привязка события прокрутки после загрузки пользователем с использованием ajax решила проблему. В моих выводах $(document).on('scroll', '#id', function() {...}) не работает и не связывает событие прокрутки после того, как найденная работа ajax работает.

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

Вы можете отменить событие после удаления или замены ul.

Надеюсь, это может помочь кому-то.

Ответ 3

Используя VueJS, я пробовал каждый метод в этом вопросе, но никто не работал. Поэтому, если кто-то борется с тем же:

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

Ответ 4

Другой вариант:

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

Ссылка: Здесь

Ответ 5

$("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?

Ответ 6

Можете ли вы поместить #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) при загрузке?

Ответ 7

Я знаю, что это довольно старая вещь, но я решил такую ​​проблему: У меня родительский и дочерний элементы прокручивались.

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

Проблема была в том, что я не знал, когда ребенок загружается в DOM, но я продолжал проверять его каждую секунду.

ПРИМЕЧАНИЕ. Это полезно, если это произойдет в ближайшее время, но не сразу после загрузки документа, иначе он будет использовать вычислительную мощность клиентов без причины.