CODEWITHSUNDEEP
jquery
RyanFishman
RyanFishman

Reputation: 695

jquery.on scroll doesn't work

I am trying to build a DOM event recorder so I can play back how a user interacted with a page. I would like to use the jquery.on functionality so I can record all events on page. In this particular instance I am trying to record scroll events but eventually I want to record all sorts of events.

Here is a link to my JS Fiddle. I expect the text "Hello" to change to "Bye" after a user scrolls the div.

http://jsfiddle.net/MnpPM/

Herel is the html

<div id="parent" style="height: 300px; width: 300px; overflow: scroll">
    <div style="height: 500px; width: 500px">
        Hello
    </div>
</div>

and here the javascript

$(document).on('scroll', '*', function () { $(this).html('Bye') });

Upvotes: 5

Views: 6757

Answers (2)

Lu Roman
Lu Roman

Reputation: 2260

As t.niese said, using mouseenter and mouseleave might be an option for you or anybody with similar requirements, i modified the jsfiddle code, so it might give a hint to who ever is reading, be aware that is buggy but you get the point.

http://jsfiddle.net/MnpPM/30/

Here is the code:

var scrollCount = 0;
$('body').on('mouseenter','*',function(e){
    console.log('mouseenter');
    $(this).scroll(function(){
           scrollCount++;
           console.log('Current Count:'+scrollCount);
    });   
    $(this).mouseout(function() {
      $(this).unbind();
    }); 
});

I used a similar code for a scrolling div that was loaded dynamically and it worked.

Upvotes: 1

t.niese
t.niese

Reputation: 40842

the scroll event does not propagate through dom, so you can't use with delegate.

if you want to listen to the scroll event you need to add the callback direct to the element:

$(function() {
     $("#parent").on('scroll', function () { $(this).html('Bye') });
});

Upvotes: 7

Related Questions