Javascript listeners to Divs that will be attached AFTER document is ready

Question

I am trying to put a listener to a scrollable div that looks like this:

$(document).ready(function() {
        $scroll = $('.generic-table')
        $scroll.scroll(function() {
           // if($(window).scrollTop() + $(window).height() == $(document).height()) {
               alert("bottom!");
           // }
        });
});

The problem is that this Div is not part of the original template but it is added to the template AFTER the user takes a specific action.

If the Div was loaded in the beginning of the page, it would work.

How to overcome that kind of issue?

Answer 1

You cannot use event delegation for .scroll() as @marcelosalloum rightly pointed out in the comments. You have to write the handler when you actually create the element.

//Create .generic-table here. BEGIN
Code
//Create .generic-table here. END

//Handle event immediately.
$('.generic-table').scroll(function() {
    alert("bottom!");
});