Div Click Event Not Working - jQuery

Question

I've looked at solutions in several other threads (most with solutions similar to this one: div click event not working ) and am just not having any luck getting click events to work on my div. See js code below:

$(document).ready(function () {
    $(document).on('click', '#l1', function() {
        alert('clicked header');
    });
});

Html:

<div id = 'main' class = 'container' style = 'height: 100%; width: 100%; float: left;'>
  <div id = 'left' class = 'container' style = 'height: 100%; width: 70%; float: left;'>
    <div id = 'l1' class = 'container bordered' align = 'right' style = 'height: 100%; width: 20%; float: left;'>
      <h1 id = 'l1Header'>Div Text</h1>
    </div>
  </div>
</div>

Css:

html body {
  height: 100%;
  width: 100%;
}

.container {
  position: relative;
  z-index: -10;
}

.bordered {
  border: 2px solid #808080;
}

#main {
  font-size: 12px;
  text-align: right;
  font-family: sans-serif;
  line-height: 1.5;
  vertical-align: middle;
}

h1 {
  font-size: 18px;
  text-align: center;
  font-family: sans-serif;
  font-weight: normal;
  line-height: 1.5;
  vertical-align: top;
  z-index: 10;
}

Any ideas?

EDIT: It was a result of the z-index. Later on in the code was an svg being added on top of the div making it impossible to interact with. Thank you all!

Answer 1

I'm not really sure why you're calling the document as opposed to just adding the event to the element. I'm also not really sure if you're trying to use jQuery or JS here. You say JS, but the function you are using is jQuery and will only work if you're using the jQuery library (not trying to be demeaning if you know better). Give this function a try:

document.getElementById("l1").addEventListener("click", function(){
alert("Clicked Header");

});

it could also have to do with your z-indexes. Not really sure why they're necessary based on just this snippet of code.