title: Div Click Event Not Working - jQuery
body: <p>I've looked at solutions in several other threads (most with solutions similar to this one: <a href="https://stackoverflow.com/questions/11665561/div-click-event-not-working">div click event not working</a>) and am just not having any luck getting click events to work on my div. See js code below: </p>
  
  <pre><code>$(document).ready(function () {
      $(document).on('click', '#l1', function() {
          alert('clicked header');
      });
  });
  </code></pre>
  
  <p>Html: </p>
  
  <pre><code>&lt;div id = 'main' class = 'container' style = 'height: 100%; width: 100%; float: left;'&gt;
    &lt;div id = 'left' class = 'container' style = 'height: 100%; width: 70%; float: left;'&gt;
      &lt;div id = 'l1' class = 'container bordered' align = 'right' style = 'height: 100%; width: 20%; float: left;'&gt;
        &lt;h1 id = 'l1Header'&gt;Div Text&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css: </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Any ideas? </p>
  
  <p><strong>EDIT:</strong> 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!</p>