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

Question

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

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

$(document).on( 'scroll', '#ulId', function(){

    console.log('Event Fired');

});

1118 7

jQuery events scroll

7 ответов:

Comments

Ничего не найдено.

Adil · Accepted Answer · 2017-05-23 15:17:53

вы, наверное, забыли дать # перед id для селектора id, вам нужно дать # до id т. е. ulId

Вам проблематично нужно привязать событие прокрутки на div, которое содержит ul и свитки. Вам нужно связать событие с div вместо ul
$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
    console.log('Event Fired');
});
Edit

выше не будет работать, потому что событие прокрутки не всплывает в DOM, который используется для события делегация, смотрите этот вопрос почему не делегировать работу для прокрутки?

но с современными браузерами > IE 8 вы можете сделать это другим способом. Вместо делегирования с помощью jquery вы можете сделать это с помощью захвата событий с помощью Java script document.addEventListener, посмотрите, как пузырится и захват работы в этом tuturial.

Live Demo
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');
});

ABHILASH SB · Accepted Answer · 2014-01-31 21:19:27

привязка события прокрутки после загрузки ul с помощью ajax решила проблему. В моих выводах $(документ).on ('scroll', '#id', function () {...}) не работает и связывает событие прокрутки после загрузки ajax, найденной рабочей.
$("#ulId").bind('scroll', function() {
   console.log('Event worked');
}); 
вы можете отменить привязку события после удаления или замены ul.

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

juliangonzalez · Accepted Answer · 2017-11-16 11:13:25

используя VueJS я пробовал каждый метод в этом вопросе, но никто не работал. Поэтому, если кто-то борется с тем же самым:
mounted() {
  $(document).ready(function() { //<<====== wont work without this
      $(window).scroll(function() {
          console.log('logging');
      });
  });
},

vipin8169 · Accepted Answer · 2017-05-23 15:17:53

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

MatayoshiMariano · Accepted Answer · 2016-08-28 00:14:56

другой вариант может быть:
$("#ulId").scroll(function () { console.log("Event Fired"); })
ссылки: здесь

IIIOXIII · Accepted Answer · 2013-10-15 10:56:40

можете ли вы поместить #ulId в документ до загрузки ajax (с отображением css: none;) или обернуть его в содержащий div (с отображением css: none;), а затем просто загрузить внутренний html во время загрузки страницы ajax, таким образом, событие прокрутки будет связано с div, который уже существует до ajax?

затем вы можете использовать:
$('#ulId').on('scroll',function(){ console.log('Event Fired'); })
очевидно, что замена ulId с тем, что фактический идентификатор скроллируемый див.

затем установите css display: block; на # ulId (или содержащий div) при загрузке?

Riiwo · Accepted Answer · 2015-11-03 01:04:06

Я знаю, что это довольно старая вещь, но я решил проблему как то: У меня был родительский и дочерний элемент прокрутки.
   if ($('#parent > *').length == 0 ){
        var wait = setInterval(function() {
            if($('#parent > *').length != 0 ) {
                $('#parent .child').bind('scroll',function() {
                  //do staff
                });
                clearInterval(wait);
            },1000);
        }
проблема у меня была в том, что я не знал, когда ребенок загружается в DOM, но я продолжал проверять его каждую секунду.

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