Rumah > Artikel > hujung hadapan web > jquery点击事件失效怎么办
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' } })
Atas ialah kandungan terperinci jquery点击事件失效怎么办. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!