NO BUG: When template is loaded via ajax, js is not working

Bugs
1

I am loading a section template via AJAX, which includes a nested slider.
I also included the template on the page from which the template is loaded via ajax to ensure all stylesheets are loaded correctly.

When testing the template itself with some populated content, the slider works correctly. However, when the template is loaded via ajax the slider is not working anymore.
While the content of the slides appear correctly when inspecting the page, the slider doesn’t show. I can make the slider visible by disabling visibility: hidden in the .splide class, but this only exposes the content without the slider functioning as intended:

.splide {
position: relative;
/* visibility: hidden; */
}

I suspect that loading the section template via AJAX is causing conflicts with Bricks elements that require JavaScript, such as the slider element. The console is not showing any error messages. Is there a way to resolve this issue?

2

Yeh you’ll need to re-run all/any functions that run on page load each time the AJAX fetches the content. They’re all inside the bricks.min.js file towards the bottom.

i forget the name for the slider function, but it’s something like bricksSplide(). Each element has a different function that would need to re-run if that element is being added to the page. (because the slider didn’t exist on the page when the code ran the first time on page load)

3

As explained by @wplit ,

You need to run bricksSplide() in JS if the DOM is fetched via AJAX by your custom code.

Additionally, ensure the required script and style are enqueued.

wp_enqueue_script( 'bricks-splide' );
wp_enqueue_style( 'bricks-splide' );
4

Thank you, @wplit and @itchycode! That fixed it!
Is there any official documentation for this? I spent half a day trying to figure out the issue.
I’m also wondering: is it possible to enqueue the CSS of the template file, as well? My workaround was to load the template and then hide it on the main page.