I am dynamically loading content via AJAX and appending it to the frontend. While the content loads successfully, the issue arises with initializing JavaScript functionality for the newly loaded elements, especially in a WordPress environment where scripts have dependencies.

What I have tried:

Extracting and registering scripts from the AJAX response:
I attempted to extract all tags from the AJAX response and dynamically load them one by one using the following approach:

$.ajax({
    url: 'your-endpoint',
    success: function(data) {
        const content = $(data);
        $('#content-container').html(content);

        // Extract scripts and reinitialize
        content.find('script').each(function() {
            const script = document.createElement('script');
            script.src = $(this).attr('src') || '';
            script.text = $(this).html();
            document.head.appendChild(script);
        });
    }
});

This approach works in some cases, but in WordPress, many scripts rely on dependencies registered with wp_enqueue_script. Without those dependencies being properly enqueued, I encounter errors like:

ReferenceError: wp is not defined

My Question:
How can I properly handle JavaScript initialization for dynamically loaded AJAX content in WordPress, ensuring all dependencies are resolved?

Is there a way to automatically re-register or reinitialize WordPress scripts (and their dependencies) for dynamically loaded content without manually enqueueing them beforehand?

I’m looking for a scalable solution that aligns with WordPress best practices.

How can I properly handle JavaScript initialization for dynamically loaded AJAX content in WordPress, ensuring all dependencies are resolved?

Is there a way to automatically re-register or reinitialize WordPress scripts (and their dependencies) for dynamically loaded content without manually enqueueing them beforehand?

I’m looking for a scalable solution that aligns with WordPress best practices.