title: Click event not handled on li click
body: <p>I'm trying to launch a click event on an <code>li</code> but it doesn't seem to work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {
     $("#menu ul li").click(function(){
        alert(this.id);
     });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .wrapper {
       display: grid;
          grid-template-columns: 2fr 7fr 2fr;
          grid-template-areas: 
            "left header  header"
            "left    content ad"
            "left    content ad"
            "footer footer  footer"
         }
      
      .header{
       grid-area:header;
       position: sticky;
       top:0;
       background-color: red;
       height: 100px;
       text-decoration: none;
      }
      
      .left-sidebar{
       grid-area:left;
       top:0;
       background-color: #22262A;
          position: sticky;
          height: 100vh;
          padding:0px 0px 0px 0px;
          font-size: 26px;
          text-align:center;
      }
      
      .left-sidebar a{
       padding: 15px 0px 15px 0px;
       color:#000;
       display: block;
       text-decoration: none;
      }
      
      .nav a:hover{
       background-color: #272b30;
      }
      
      .ad{
       grid-area:ad;
       background-color: navy;
      }
      .content{
       grid-area:content;
       padding: 5px 5px 5px 5px;
       background-color: yellow;
       height: 100vh;
      }
      
      .footer{
       grid-area:footer;
       background-color: grey;
       height: 125px;
      }
      
      #logo{
       margin-top: 50px;
       margin-bottom: 50px;
      }
      
      .no-list{
       display: block;
       text-decoration: none;
      }
      
      #menu ul li{
       background-color: yellow;
       z-index: 500;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
   &lt;link rel="stylesheet" type="text/css" href="assets/css/style.css"&gt;
   &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
   &lt;script src="assets/js/main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
   &lt;div class="header"&gt;
   &lt;/div&gt;
   &lt;div class="ad"&gt;advertisements&lt;/div&gt;
   &lt;div class="left-sidebar"&gt;
    &lt;nav id="menu"&gt;
     &lt;a href="#" data-target="home" class="" id="logo"&gt;Sylent&lt;/a&gt;
     &lt;ul class="nav" id="test2"&gt;
      &lt;li id="getBierTest" onclick="alert()"&gt;try&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/nav&gt;
   &lt;/div&gt;
   &lt;div class="content"&gt;main content div&lt;/div&gt;
   &lt;div class="footer"&gt;footer div&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I used this in another project and it worked. But this time I'm using CSS grid and suddenly it doesn't. Any ideas what might caused this? 
  Thanks in advance.</p>