javascript - Function click on li element - Stack Overflow

admin管理员组

文章数量:1336631

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?

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 19, 2015 at 0:23 moumoute6919 2,41611 gold badge1515 silver badges1717 bronze badges asked Feb 15, 2015 at 12:57 user2654186user2654186 19522 gold badges44 silver badges1111 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

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

https://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/

本文标签： javascriptFunction click on li elementStack Overflow