您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。