title: Function click on li element
body: <p>I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.</p>
  
  <p>JS</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      $("#mainmenu li").click(function() {
         alert(this.id); 
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="menu1"&gt;
      &lt;ul id="mainmenu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Choose the first map &lt;i class="arrow"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Category 1&lt;i class="arrow"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html"&gt;&lt;a href="#"&gt;% of employees cycling to work&lt;/a&gt;&lt;/li&gt;                 
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Ethnic maps&lt;i class="arrow"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html"&gt;&lt;a href="#"&gt;% of White British residents&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html"&gt;&lt;a href="#"&gt;% of White residents&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script type="text/javascript"&gt;
       $("#mainmenu li").click(function() {
             alert(this.id); 
          });
        &lt;/script&gt;
  
  
  
       &lt;div id="menu1"&gt;
       &lt;ul id="mainmenu"&gt;
       &lt;li&gt;&lt;a href="#"&gt;Choose the first map &lt;i class="arrow"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;ul&gt;
         &lt;li&gt;&lt;a href="#"&gt;Category 1&lt;i class="arrow"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul&gt;
           &lt;li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html"&gt;&lt;a href="#"&gt;% of employees cycling to work&lt;/a&gt;&lt;/li&gt;     
          &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Ethnic maps&lt;i class="arrow"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul&gt;
           &lt;li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html"&gt;&lt;a href="#"&gt;% of White British residents&lt;/a&gt;&lt;/li&gt;
           &lt;li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html"&gt;&lt;a href="#"&gt;% of White residents&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
         &lt;/li&gt;
        &lt;/ul&gt;
       &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>Unfortunately after click nothing happens. No errors in console as well.
  Probably the mistake is in a JS code, do you have an idea what is an issue?</p>