Scroll event listener not firing

Question

I can't get an event listener to fire when scrolling. It works when clicking but not scrolling.

I want it to work even when the div it's listening for is created after the listener itself because of ajax usages. Therefore I use .on instead of .scroll .

$('.container').on('scroll', '.appended', function(){
    console.log('scrolling!');
});

I've created a JSFiddle here .

Answer 1

You need to attach the listener to the append element. Like this :

var nAppend = $('<div class="appended">this is appended<br>this is appended<br>this is appended<br>this is appended<br>this is appended<br>this is appended<br>this is appended<br>this is appended<br>this is appended<br>this is appended<br>this is appended<br></div>').scroll(function(){
    console.log('scrolling!');
});

setTimeout(function(){$('.container').append(nAppend);},1000);

I updated your JSfiddle .

Answer 2

滚动事件不会冒泡 ，因此委托方法将行不通。

Answer 3

Use mousewheel event listener instead:

$('.container').on('mousewheel', '.appended' ,function(e){
    if(e.originalEvent.wheelDelta > 0) {
        console.log('scrolling up !');
    }
    else{
        console.log('scrolling down !');
    }
});