observe scrolling in div doenst work for future events

Question

no, this isn't a duplicated. for every kind of events, this is working - except for scrolling!

we are having chat-windows popping up and we need to observe the scroll event of those.

this works

$(".chat-window").scroll(function() {
    var scroll = $(this).scrollTop();
    console.log(scroll);
})

obv. it just works if i throw it into my console, after the chat windows already popped up.

but we need it for future elements. this solution isnt working

this doenst work

$(document).on("scroll", ".chat-window", function(event) {
    var scroll = $(this).scrollTop();
    console.log(scroll);
});

with "doesn't work" i mean the function isn't triggered.

is it me or is that a common bug in jquery? i can't obseve furute clickevents.

Answer 1

As per jQuery docs here:

In all browsers, the load, scroll, and error events (e.g., on an element) do not bubble..Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event..

But, you can use Javascript addEventListener on the parent or document to capture the event and then do a delegation using the event.target for dynamic elements.

wrap.addEventListener('scroll', function (e) {
    if (e.target.className === 'chat-window') { 
        console.log('scrolling', e.target);
    }
}, true);

Example:

var chat = $("#tmpl").html(), 
    $chat = $(chat),
    wrap = document.getElementById('wrap');

$("#wrap").append($chat);

wrap.addEventListener('scroll', function (e) {
    if (e.target.className === 'chat-window') { 
        console.log('scrolling');
    }
}, true);

console.log = function(txt) {
  $("#result").html($("#result").html() + "<br>" + txt);
}

.chat-window {
    height: 120px; width: 320px;
    border: 1px solid gray;
    overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="tmpl" type="text/template">
    <div class="chat-window" contenteditable></div>
</script>
<p>Type any content below and cause it to scroll..</p>
<div id="wrap"></div>
<p id="result"></p>

Answer 2

The scroll event does not bubble up the DOM. See:http://www.quirksmode.org/dom/events/scroll.html

And http://api.jquery.com/on/:

In all browsers, the load, scroll, and error events (e.g., on an element) do not bubble. In Internet Explorer 8 and lower, the paste and reset events do not bubble. Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event.

Also: https://forum.jquery.com/topic/cannot-use-delegate-for-scroll-events:

The scroll event does not bubble up the DOM, so live() and on() and delegate() won't work. You will have to bind the event handler to the dynamically created element yourself.