Jquery .on('scroll') not firing the event while scrolling

Question

Scroll event is not firing while scrolling the ul. I'm using jQuery version 1.10.2. As I'm loading the ul from an ajax page, I couldn't use $('ulId').on('scroll', function() {}); or other live methods. Please help me to find a solution.

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

Answer 1

You probably forgot to give # before id for id selector, you need to give # before id ie is ulId

You probably need to bind the scroll event on the div that contains the ul and scrolls. You need to bind the event with div instead of `ul`

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

Edit

The above would not work because the scroll event does not bubble up in DOM which is used for event delegation, see this question why doesn't delegate work for scrolling.

But with modern browsers > IE 8, you can do it in another way. Instead of delegating by using jquery, you can do it using event capturing with javascript document.addEventListener, with the third argument as true; see how bubbling and capturing work in this 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*/); 

If you do not need event delegation then you can bind scroll event directly to the ul instead of delegating it through document.

Live Demo

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

Answer 2

Binding the scroll event after the ul has loaded using ajax has solved the issue. In my findings $(document).on( 'scroll', '#id', function () {...}) is not working and binding the scroll event after the ajax load found working.

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

You may unbind the event after removing or replacing the ul.

Hope it may help someone.