1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > jquery点击事件无效及解决办法

jquery点击事件无效及解决办法

时间:2020-02-19 06:07:32

相关推荐

jquery点击事件无效及解决办法

先放完整代码

<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试</title><script src="/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><div id="a"></div><div id="b"></div><div id="d"></div><div id="c"><ul><li id="c1">11111111</li><li id="c2">22222222</li><li id="c3">33333333</li></ul></div><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'}})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。