Не работает scroll на append

Question

Не работает scroll на вставленные элементы, например:

$('.elem').scroll(function(){
  console.log('scroll')
})

а вот-так не работает:

$('body').append('<div class="elem"></div>')
$('.elem').scroll(function(){
  console.log('scroll')
})

Answer 1

Используйте on() вместо scroll()

Если div подгружается динамически, по событию из вне (как нажатие кнопки или ajax запрос, то и событие скролл вы должны декларировать - там).

$( document ).ready(function() {

    $('.button').on('click', function(){ 

        $('body').append('<div class="elem">Scroll me<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>');     
        
        $('.elem').on('scroll', function() {
           console.log('Hallelujah');
        }); 
      
    })
});

.elem {overflow-y:scroll; overflow-x:hidden; height:100px; color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button class="button"> Click me </button>
</body>

Все работает

БЛОГ НА HUSL

Не работает scroll на append

Ответы (1 шт):