Function click on li element

Question

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.

JS

  <script type="text/javascript">
    $("#mainmenu li").click(function() {
       alert(this.id); 
    });
  </script>

HTML

    <div id="menu1">
    <ul id="mainmenu">
    <li><a href="#">Choose the first map <i class="arrow"></i></a>
        <ul>
            <li><a href="#">Category 1<i class="arrow"></i></a>
                <ul>
                    <li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html"><a href="#">% of employees cycling to work</a></li>                 
                </ul>
            </li>
            <li><a href="#">Ethnic maps<i class="arrow"></i></a>
                <ul>
                    <li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html"><a href="#">% of White British residents</a></li>
                    <li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html"><a href="#">% of White residents</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>  

  <script type="text/javascript"> $("#mainmenu li").click(function() { alert(this.id); }); </script> <div id="menu1"> <ul id="mainmenu"> <li><a href="#">Choose the first map <i class="arrow"></i></a> <ul> <li><a href="#">Category 1<i class="arrow"></i></a> <ul> <li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html"><a href="#">% of employees cycling to work</a></li> </ul> </li> <li><a href="#">Ethnic maps<i class="arrow"></i></a> <ul> <li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html"><a href="#">% of White British residents</a></li> <li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html"><a href="#">% of White residents</a></li> </ul> </li> </ul> </li> </ul> </div> 

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?

Answer 1

You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On

Answer 2

https://jsfiddle.net/pgsf6fot/

$(document).ready(function() { 
   $("#mainmenu li").click(function() {
          alert( $(this).attr('id') ); 
   });
});

Answer 3

use on event for dynamic elements

$(document).ready(function(){
    $("#mainmenu").on("click","li",function() {
        alert(this.id); 
    });

});

Answer 4

Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.

Try wrapping with a DOM ready listener ( http://api.jquery.com/ready/ ), this will hold the executing of your JS until the DOM has been rendered.

$(function() {
    $("#mainmenu li").click(function() {
        alert(this.id); 
    });
})

Answer 5

 $(function(){ $("#mainmenu li ul li ul li").click(function() { alert(this.id); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu1"> <ul id="mainmenu"> <li><a href="#">Choose the first map <i class="arrow"></i></a> <ul> <li><a href="#">Category 1<i class="arrow"></i></a> <ul> <li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html"><a href="#">% of employees cycling to work</a></li> </ul> </li> <li><a href="#">Ethnic maps<i class="arrow"></i></a> <ul> <li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html"><a href="#">% of White British residents</a></li> <li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html"><a href="#">% of White residents</a></li> </ul> </li> </ul> </li> </ul> </div> 

Answer 6

Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li

 <script type="text/javascript">
    $("#mainmenu li").click(function(e) {
       alert($(this).attr('id')); 
       return false;
    });
  </script>

Demo: http://jsfiddle.net/ptx2hwy3/