How to handle JavaScript reinitialization for dynamically loaded AJAX content with WordPress script dependencies?

Question

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.

The answer depends really on how you expect users to interact with the page and how your AJAX is triggered. Is this triggered immediately on page load? Or is it triggered often enough that simply enqueuing the extra scripts on this particular page is of no concern? — maiorano84
– maiorano84, Commented Dec 23, 2024 at 22:21
the best practice is to not use the http request to retrieve html code and javascript code. the api endpoint should return only data (most of time in json format) and then you use these data to update the page content. this help to keep the consistency of the page. moreover, the http request send a littler response and then, load quicker and with less resources use on server side and client side. — mmm
– mmm, Commented Dec 23, 2024 at 23:33
@maiorano84 - The requirement is simple: I have multiple posts created using different page builders, shortcodes, and other tools. I want to display these posts as a dashboard on the frontend, with a sidebar showing the page titles. Clicking on a title should render the corresponding post in the main content area. I'm nearly finished with this, but the issue is that dynamic JavaScript content isn't functioning correctly when loaded via AJAX. — Rohit Patil
– Rohit Patil, Commented Dec 24, 2024 at 5:16

WordPress Developer · Accepted Answer · 2025-01-08 16:10:09Z

0

In jQuery you can handle dynamically loaded content like this

jQuery(document).on('click' , '.dynamic-content-class' , function(){
 // your logic here
});

replace dynamic-content-class with your class

you can add event handlers on dynamic content like that

answered Jan 8 at 16:10

WordPress Developer

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to handle JavaScript reinitialization for dynamically loaded AJAX content with WordPress script dependencies?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related