Cookiebot blocks native DOM events

Karl Bishop

• August 01, 2022 23:39

I noticed when I grant any level of consent below "Allow all cookies" (e.g. if I press "Use necessary cookies only" or tick all but one category and press "Allow selection"), jQuery does not work properly on our site. This prevents all other scripts from working.

We're using Cookiebot in auto-blocking mode. And it is the first script in the head of the HTML document.

I tried marking jQuery and all other affected scripts as data-cookieconsent="ignore" but this didn't fix it.

I eventually realised Cookiebot somehow prevents the jQuery .ready() function from working.

E.g. if I have in my script:

console.log("Testing 1");

$(function () { console.log("Testing 2") });

Then I will see only "Testing 1" logged to the console.

I have then tested native DOM methods for running code when the page is ready and it seems that Cookiebot is blocking these. E.g. I see no output from the following simple script inserted at the end of the body unless I consent to all cookies:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
    console.log("Testing DOMContentLoaded");

});

document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        console.log("Testing readyStateComplete");
    }
}
</script>

If I add data-cookieconsent="ignore" to the above, then I do see the output "Testing readyStateComplete" but still see nothing from the DOMContentLoaded event.

Why is Cookiebot blocking these native DOM events?

Why is it blocking such a simple script as this last example at all?

0

• 

  Danny Krämer

  • September 08, 2022 18:41

  I have the same problem. In my example it is a "change" event on a checkbox that is not working when cookiebot is active. Any solutions for this problem?

  0
• 

  Karl Bishop

  • September 13, 2022 02:13

  I didn't find a solution for jQuery ready functions but I worked around it using vanilla JS.

  I added this function to the top of my JS:

  // Taken from https://youmightnotneedjquery.com/#ready
  function ready(fn) {
    if (document.readyState != 'loading'){
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }

   

  Then I replaced all the jQuery 'ready' handlers:

  // Replace this:
  $(function () {
    // do stuff inside jQuery ready handler...
  });
  
  // With this:
  ready(function () {
    // do stuff inside vanilla ready handler...
    // other jQuery code seems to work fine here!
  });
  
  

   

  This is working for me, including checkbox 'change' events inside a vanilla ready handler like this:

  ready(function () {
    var myCheckbox = $('#myCheckbox');
    myCheckbox.on('change', function () {
      console.log('This should work!');
    });
  });

  1

Please sign in to leave a comment.