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> 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?
Share Improve this question edited Mar 19, 2015 at 0:23 moumoute6919 2,4161 gold badge15 silver badges17 bronze badges asked Feb 15, 2015 at 12:57 user2654186user2654186 1952 gold badges4 silver badges11 bronze badges 2-
You have to bind event once elements are available in DOM. Wrap it in document ready handler or set it before
<body/>closing tag – A. Wolff Commented Feb 15, 2015 at 12:59 -
1
wrap code in
$(function(){ /* code*/})so elements exist when it runs – charlietfl Commented Feb 15, 2015 at 12:59
6 Answers
Reset to default 3https://jsfiddle/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
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
use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});
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./ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})
$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});<script src="https://ajax.googleapis./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>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/ptx2hwy3/