這篇文章給大家分享的是有關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之后就不推薦使用了?,F在主要用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點擊事件失效的解決方法就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網站標題:jquery點擊事件失效的解決方法-創新互聯
文章源于:http://vcdvsql.cn/article0/jshio.html
成都網站建設公司_創新互聯,為您提供手機網站建設、商城網站、網站導航、網站改版、品牌網站建設、ChatGPT
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯