How to dynamically load html+js code and make it work?

Question

JavaScript

Hello, I have the following problem: There are several pages that contain dynamic elements, eg gallery and slider (composed of html and js). When loading the content of these pages on a separate page via ajax (I use the axios library, loading events on button clicks, I click on one button - the 1st page is loaded, on the 2nd - another) the resulting page is almost correctly displayed (html and css code pages), I get and output something like this:

$pageBlock = document.getElementById('content');
 axios.get(this.elementUrl {
                        responseType: 'json'
                    }).then((response) => {
                            this.pageBlockContent = response.data;

$pageBlock.innerHTML = this.pageBlockContent;

But dynamic elements that need js (eg, slider, gallery) are not displayed and will not work accordingly.

Is there a way to correctly display all dynamic content? Need to somehow redraw the page, tell the browser that there are new elements that need js? Thank you.

Answer 1

When loading

Well, how is that?
On a successful page load callback, you need to call the code that will make the non-working one work. Elements that require initialization of some scripts cannot be made to work differently. If business concerned events delegation could be applied.

Answer 2

For these purposes - I created includeHTML (for SPA and other interactive web applications).
It just allows you to download (and check whether it has already been loaded) the necessary HTML blocks and JS scripts (+ CSS and TXT).
All description is on github. It is not clear - ask: I will answer.