我有一个包含li元素的菜单，单击其中一个元素后，我希望运行功能单击并显示带有li元素ID的警报。
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> 不幸的是，单击后没有任何反应。控制台中也没有错误。错误可能出在JS代码中，您知道什么是问题吗？
https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句