jQuery does not select elements (Wordpress)

Question

I am using Insert Headers and Footers plugin for Wordpress and I am trying to embedd some javascript code will react to the user's actions.

So this is the simple code that I have tried:

$("a#newsLetter").click(function() { 
    alert("element was clicked");  
});

I also tried:

$( "#newsLetter" ).on( "click", function() {
  alert("element was clicked");
});

Both did not work, even though I know that jQuery is loaded and included ( I performed a simple test and of alerting some message on page load)

This is the tag shown in the inspector:

<a href="#" class="elementor-button-link elementor-button elementor-size-xl" role="button" id="newsLetter">

Thanks.

EDIT: This is how I included jQuery

Answer 1

Use the three parameter form, it applies to elements added after the click handler has been added:

$( document.body ).on( "click", "#newsLetter", function() {
  alert("element was clicked");
});

Answer 2

If jquery not working then try this

document.getElementById("newsLetter").onclick =function(){
  alert('clecked');
}

<a href="#" class="elementor-button-link elementor-button elementor-size-xl" role="button" id="newsLetter">Link</a>