Contextual Consent does not work for dynamically added elements (eg via AJAX)

[maximilian-walter]

trafficstars

We use AJAX to load the content of modal windows, which can contain embed-codes (like YouTube). These embed-codes should be managed by Klaro as explained in the documentation:

https://heyklaro.com/docs/tutorials/contextual_consent

This does not work as expected for this use case, because Klaro does not recognize the newly added elements (the content of the modal window is added to the DOM long after Klaro got initialized).

If the user has already given his consent, is is enough to call klaro.getManager().applyConsents() after the loaded HTML was added to the DOM. But I also want to use the placeholder-element, in case the user has not given his consent (yet). How can I achieve this?

I tried to call klaro.show(). This created the placeholder-element, but opened also the cookie-manager from Klaro. The accept-buttons in the placeholder didn't work either: Only the placeholder-element gets removed, but the embed-code is not shown.

I also tried to call klaro.renderContextualConsentNotices() (https://github.com/kiprotect/klaro/blob/master/src/lib.js#L111), but had no success (it seems this is an internal method which should not be called directly?).

I would be grateful for any tips! Thank you!

I'm using the latest version.

[thomasfaure]

@maximilian-walter Here is a hack that works:

apps.push({
  purposes: ['content'],
  name: 'iframe-youtube',
  callback: (consent, app) => {
    if (consent) {
      $('iframe[data-name=iframe-youtube]').each(function () {
        $(this).css('display', 'inline');
      });
    }
  },
});