Question

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

Answer 1

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