Question

我有一个带li元素的菜单，点击其中一个元素后我想运行一个函数点击并显示一个id为li元素的警告。

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>

＆＃13;

 <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>

＆＃13;

不幸的是点击后没有任何反应。控制台中也没有错误。可能是JS代码中的错误，你知道什么是问题吗？

Answer 1

此处有3个选项可以解决您的问题：
1-将你的JS代码放在你需要绑定的html元素之后。
2-使用document.ready使js代码在所有html渲染后执行 3-使用On

Answer 2

https://jsfiddle.net/pgsf6fot/

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

Answer 3

在事件中使用动态元素

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

});

Answer 4

可能只是时间问题，在执行JS时DOM可能还没有准备好。因此，您在当时不存在的元素上注册click事件，因为它们尚未呈现。

尝试使用DOM ready侦听器（http://api.jquery.com/ready/）进行包装，这将保持JS的执行，直到呈现DOM为止。

$(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

使用$（this）指定click li的id属性，并返回false以取消任何传播和li的默认行为

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

演示：http://jsfiddle.net/ptx2hwy3/

单击li元素的函数

6 个答案: