jquery点击事件失效怎么办

互联网 20-11-20

jquery点击事件失效是因为live在JQUERY1.7之后就不推荐使用了，其解决办法就是将代码改为“$("#a").on('click',function(){for(var i=0 ; i< leng;i++){...}}”即可。

推荐：《jquery视频教程》

先放完整代码

<!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点击事件失效怎么办的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： jQuery

jquery点击事件失效怎么办

相关资讯

标签推荐