I have a page using css bootstrap as a template model.

When the page loads it executes a function that loads a home page code in to a div. Within that content there is a div with id ‘feed’. I want the feed to be loaded, via ajax, only when the user scrolls. I am having trouble getting the scroll event listener to work, possibly because it is ajax loaded content.

function page_requests_homepage() {
    // Disable caching for AJAX requests
    $.ajaxSetup({ cache: false });

    // Display spinner while loading content
    $('#content_area').html('<div class="spinner"><div>');

    // Make AJAX request to load homepage content
    $.ajax({
        url: 'pages/homepage.php',
        success: function(data) {
            // Show content area
            $('#content_area').show();
            
            // Set content of content area to received data
            $('#content_area').html(data);

            // Add scroll event listener to content area
            $("#content_area").scroll(function() {
                load_feed();
            });
        }
    });
}

            function load_feed() {
                $.ajax({
                    url: 'feed.php',
                    type: 'GET',
                    success: function(data) {
                        $('#feed').html(data);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error loading feed:', error);
                    }
                });
            }

Tried lots of different event listeners, with not much luck.