Присоединить событие прокрутки к div с отключением привязки body()

У меня возникают проблемы с событием прокрутки.

Я пытаюсь прикрепить/привязать событие к определенному div, и я использую $('body').on() для этого, из-за того, что содержимое перезагружается при сортировке, поэтому оно потеряет привязку.

Это не работает, событие не запускается:

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

Это, с другой стороны, работает:

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

И это также:

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

В чем проблема?

Ответ 1

Вы не можете добавить делегирование в событие scroll. Это событие не создает пузырь в DOM, и поэтому вы не можете делегировать его ни одному элементу. Вы можете найти более подробную информацию здесь:

Событие прокрутки не пузырится.

Хотя событие не пузырится, браузеры запускают событие прокрутки как в документе, так и в окне, когда пользователь прокручивает всю страницу.

Вам нужно будет создать обработчик события внутри события, которое создаст ваш прокручивающий элемент.

Пример жизни: 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');
    });

});

Ответ 2

В современных браузерах (IE > 8) вы можете захватить scroll событие, например, document для динамического элемента. Поскольку jQuery не реализует этап захвата, вы должны использовать метод javascript addEventListener():

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