Collegare l'evento di scorrimento a div con il collegamento body on() fallisce

Question

Ho qualche problema con l'evento scroll.

Sto cercando di collegare/legare l'evento ad un div specifica, e sto usando $('body').on() di farlo, a causa del fatto che il contenuto viene ricaricato durante l'ordinamento, quindi perderà il suo legame.

Questo non funziona, l'evento non viene generato:

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

Questo d'altra parte funziona:

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

E anche questo:

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

cos'è il problema?

Answer 1

Non è possibile aggiungere una delega all'evento scroll. Questo evento non svela il DOM e quindi non puoi delegarlo a nessun elemento. È possibile trovare ulteriori informazioni here:

L'evento di scorrimento non lo fa ribollire.

Sebbene l'evento non abbia bolle, i browser attivano un evento di scorrimento su entrambi i documenti e sulla finestra quando l'utente scorre l'intera pagina.

Sarà necessario creare il gestore di eventi all'interno dell'evento che crea l'elemento di scorrimento.

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

}); 

Answer 2

Il browser moderni (IE> 8), è possibile catturare scroll evento per es document livello di elemento dinamico. Poiché jQuery non implementa la fase di acquisizione, devi utilizzare il metodo 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 
);