Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Attach scroll event to div with body on() binding fails

I'm having some trouble with the scroll event.

I'm trying to attach/bind the event to a specific div, and I'm using $('body').on() to do it, due to the fact that the content is reloaded when sorting, so it will lose its binding.

This doesn't work, the event is not fired:

$('body').on('scroll', 'div.dxgvHSDC + div', function () {
}

This on the other hand works:

$('body').on('mousewheel DOMMouseScroll', 'div.dxgvHSDC + div', function () {
}

And this as well:

$('div.dxgvHSDC + div').on('scroll', function () {
}

What's the problem?

like image 782
Jompis Avatar asked Sep 26 '13 11:09

Jompis


2 Answers

You can not add delegation to the scroll event. This event doesn't bubble up the DOM and therefore you can not delegate it to any element. You can find more information here:

The scroll event does not bubble up.

Although the event does not bubble, browsers fire a scroll event on both document and window when the user scrolls the entire page.

You will need to create the event handler inside the event which creates your scrolling element.

Living example: http://jsfiddle.net/Um5ZT/1/

$('#link').click(function(){

    //dynamically created element
    $('body').append('<div class="demo"></div>');
        
    //dynamically added event
    $('.demo').on('scroll', function () {
        alert('scrolling');
    });
    
});
like image 141
Alvaro Avatar answered Nov 18 '22 03:11

Alvaro


On modern browsers (IE>8), you can capture scroll event to e.g document level for dynamic element. As jQuery doesn't implement capturing phase, you have to use javascript addEventListener() method:

document.addEventListener(
    'scroll',
    function(event){
        var $elm = $(event.target);
        if( $elm.is('div.dxgvHSDC + div')){ // or any other filtering condition
            // do some stuff
            console.log('scrolling');
        }
    },
    true // Capture event
);
like image 15
A. Wolff Avatar answered Nov 18 '22 03:11

A. Wolff