JQuery.on ('scroll') does not fire an event when scrolling

Question

The scroll event does not fire when scrolling ul . I am using jQuery version 1.10.2. When I load ul from the ajax page, I could not use $('ulId').on('scroll', function() {}); or other live methods. Please help me find a solution.

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

Answer 1

You probably forgot to give # before the identifier for the identifier selector, you need to give # before the id , i.e. will be ulId

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

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

Edit

The above will not work, because the scroll event does not pop up in the DOM, which is used to delegate the event, see this question why not delegate the work to scroll?

But with modern browsers> IE 8, you can do it the other way. Instead of delegating using jquery, you can do this by capturing events using the java script document.addEventListener with the third argument as true ; See how bubbles and traps work in this tutorial .

Real time 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 to delegate the event, you can bind the scroll event directly to ul, rather than delegating it through document .

Real time demo

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

Answer 2

Binding a scroll event after loading by a user using ajax solved the problem. In my output, $ (document) .on ('scroll', '#id', function () {...}) does not work and does not bind the scroll event after the found ajax job is working.

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

You can cancel the event after deleting or replacing ul.

Hope this can help someone.

Answer 3

Using VueJS, I tried every method in this question, but no one worked. Therefore, if someone is struggling with the same:

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

Answer 4

Another variant:

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

Link: Here

Answer 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"); }) } 

see this post - Associate event scrolling with dynamic DIV?

Answer 6

Can you put #ulId in the document before loading ajax (using css display: none;) or wrap it in a containing div (using css display: none;) and then just load the internal html while ajax loading the page this way will the scroll event be associated with a div that already exists before ajax?

Then you can use:

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

obviously replacing ulId with any valid scrollable div id.

Then install css display: block; to #ulId (or containing a div) when loading?

Answer 7

I know this is a pretty old thing, but I solved the following problem: My parent and child elements were scrolling.

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

The problem was that I did not know when the child loaded into the DOM, but I kept checking it every second.

NOTE. This is useful if this happens in the near future, but not immediately after loading the document, otherwise it will use the computing power of clients for no reason.