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

User · Answer

body   on  custom-scroll     myDiv   function        console log  Scrolled  P            btn   on  click   function           body   append   lt div class  myDiv  gt  lt br gt  lt br gt  lt p gt Content1 lt p gt  lt br gt  lt br gt  lt p gt Content2 lt p gt  lt br gt  lt br gt  lt  div gt         listenForScrollEvent     myDiv           function listenForScrollEvent el       el on  scroll   function            el trigger  custom-scroll               see this post - Bind scroll Event To Dynamic DIV

User · Answer

Using VueJS I tried every method in this question but none worked  So in case somebody is struggling whit the same   mounted         document  ready function        lt  lt        wont work without this         window  scroll function               console log  logging

User · Answer

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

User · Answer

You probably forgot to give   before id for id selector  you need to give   before id ie is ulId   You problably need to bind scroll event on 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 scroll   But with modern browsers   IE 8 you can do it by other way  Instead of delegating by using jquery you can do it using event capturing with java script 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

User · Answer

Another option could be       ulId   scroll function      console log  Event Fired         Reference  Here

User · Answer

I know that this is quite old thing  but I solved issue like that  I had parent and child element was scrollable      if      parent  gt      length    0            var wait   setInterval function                 if     parent  gt      length    0                         parent  child   bind  scroll  function                         do staff                                     clearInterval wait                 1000               The issue I had is that I didn t know when the child is loaded to DOM  but I kept checking for it every second    NOTE this is useful if it happens soon but not right after document load  otherwise it will use clients computing power for no reason

User · Answer

Can you place the  ulId in the document prior to the ajax load  with css display  none    or wrap it in a containing div  with css display  none    then just load the inner html during ajax page load  that way the scroll event will be linked to the div that is already there prior to the ajax    Then you can use       ulId   on  scroll  function    console log  Event Fired         obviously replacing ulId with whatever the actual id of the scrollable div is   Then set css display  block  on the  ulId  or containing div  upon load

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

Examples related to jquery

Examples related to events

Examples related to scroll