initialize Interactivity API directives on asyncronously loaded content

[helgatheviking]

Is there a way to initialize Interactivity API directives on late/ajax loaded content?

The source script appears to only run one time, asyncronously, on DOMContentLoaded.

For context, I am rendering an inner block inside the WooCommerce cart block... but that is actually front-end rendered. So far, I haven't been able to get the Interactivity directives to initialize on my inner block even though the script is loaded.

[cbravobernal]

Hi there!

I'm afraid there is no way to run Interactivity API on demand. The API is not yet ready for AJAX loaded content (SPA like) unless you use interactivity-router navigate function. The API doesn't know how to control jQuery/vanilla JS and, like other frameworks, all the interactive components must be made with the same framework, in this case the Interactivity API.

For that to work, you need to define a router region and only have static HTML or Interactivity based interactive HTML. If you have custom blocks, you need to define its compatibility with block supports.

You can check query loop core block code for an example.

The team is still working to find the best approach to deal with injected content, but is a tricky issue, as we cannot know what JS will need to be executed after an HTML injection.

[helgatheviking]

Thanks for the explanation! The only JS I was hoping to run after injection would be Interactivity directives. I just noticed that they aren't initialized when not in the page on load.

Router regions might be a bit over my head, unless there are some good tutorials I am missing. But the Query Loop block is a good place to learn as I am trying to loop through some content.