这篇文章给大家分享的是有关jquery点击事件失效的解决方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
jquery点击事件失效是因为live在JQUERY1.7之后就不推荐使用了，其解决办法就是将代码改为“$("#a").on('click',function(){for(var i=0 ; i< leng;i++){...}}”即可。
先放完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style type="text/css">
#a{
width:50px;
height:50px;
background: rgb(54, 54, 54);
}
#b{
width:50px;
height:50px;
background: rgb(144, 243, 182);
}
#d{
width:50px;
height:50px;
background: rgb(114, 116, 231);
}
li{
list-style: none;
}
.display{display:block;}
.hide{display:none;}
</style>
</head>
<body>
<p id="a"></p>
<p id="b"></p>
<p id="d"></p>
<p id="c">
<ul>
<li id="c1">11111111</li>
<li id="c2">22222222</li>
<li id="c3">33333333</li>
</ul>
</p>
<script type="text/javascript">
var link = $('ul li');
var leng = c.querySelectorAll("li").length;
$("#a").on('click',function(){
for(var i=0 ; i< leng;i++){
link[i].className = 'display'
}
})
$("#b").on('click',function(){
for(var i=0 ; i< leng;i++){
if(link[i].id !== 'c2'){
link[i].className = 'hide'
}else{
link[i].className = 'display'
}
}
})
$("#d").on('click',function(){
for(var i=0 ; i< leng;i++){
if(link[i].id !== 'c1'){
link[i].className = 'hide'
}else{
link[i].className = 'display'
}
}
})
</script>
</body>
</html>一开始点击事件这样写的，发现点击无效，支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面。
$('#a').click = function(){
for(var i=0 ; i< leng;i++){
link[i].className = 'display'
}
}后来将代码改为下面代码就好了
$("#a").on('click',function(){
for(var i=0 ; i< leng;i++){
link[i].className = 'display'
}
})感谢各位的阅读！关于jquery点击事件失效的解决方法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
