JS doesn't work on Firefox

Question

I use some JS to make the Cookie advice to users. And it works good on Chrome, IE and Safari. When I test it on Firefox, banner doesn't close when I click on close link. Can anybody help me?

This is the JS I use:

$(document).ready(function(){
  $("#cookies").addClass("display");
});


$("#close-cookies").click(function(){ 
  event.preventDefault();
  $("#cookies").addClass("close-cookies");
});

And this is the HTML:

<div id="cookies">
  <p>blablablabla</p>
  <p><a href="#" id="close-cookies">CLOSE</a></p>
</div>

Answer 1

you didn't initialize the event variable

$("#close-cookies").click(function(event){ 

and this needs to be inside

 $(document).ready(function(){

so the fixed code should be:

$(document).ready(function(){
  $("#cookies").addClass("display");
  $("#close-cookies").click(function(event){ 
    event.preventDefault();
    $("#cookies").addClass("close-cookies");
  });
});

Answer 2

The code

$("#close-cookies").click(function(){ 
  event.preventDefault();
  $("#cookies").addClass("close-cookies");
});

is out of $(document).ready(); which means that is executed before the HTML elements are rendered

Answer 3

Try by removing the class which is already assigned and then again add a class to ID cookies:

$("#close-cookies").click(function(){ 
  event.preventDefault();
  $("#cookies").removeAttr("class").addClass("close-cookies");
});