您好,登錄后才能下訂單哦!
本文實例講述了JS實現為動態(tài)創(chuàng)建的元素添加事件操作。分享給大家供大家參考,具體如下:
html中直接生成的元素,添加事件,我們都知道,但是如何為一個動態(tài)生成的元素添加事件呢,jquery中的live
方法可以做到這一點
具體實現可以在demo中看到
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS實現為動態(tài)創(chuàng)建的元素添加事件</title> <script src="js/lib/jquery-1.7.2.min.js"></script> </head> <body> <button id="btn">添加事件</button> <div id="panel"></div> <script> // js原生實現 // var btn=document.getElementById("btn"); // btn.onclick=function(){ // var arr= []; // for(var i=0;i<10;i++){ // arr.push("<p id='nep'>"+i+"</p>"); // } // // document.getElementById("panel").innerHTML=arr.join('<br/>'); // } // //jquery部分實現 $("#btn").click(function(){ var arr= []; for(var i=0;i<10;i++){ arr.push("<p id='nep'>"+i+"</p>"); } $("#panel").html(function(){ return arr.join("<br/>"); }); }); //為動態(tài)創(chuàng)建的html標簽元素添加事件 $("#nep").live("click",function(){ var that=$(this);//獲取當前點擊的this對象 console.log(that.text()); }); </script> </body> </html>
運行結果:
PS:關于javascript事件說明可參考本站javascript事件與功能說明大全:http://tools.jb51.net/table/javascript_event
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。