JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作示例
本文實(shí)例講述了JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作。分享給大家供大家參考,具體如下:
html中直接生成的元素,添加事件,我們都知道,但是如何為一個(gè)動(dòng)態(tài)生成的元素添加事件呢,jquery中的live方法可以做到這一點(diǎn)
具體實(shí)現(xiàn)可以在demo中看到
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn - JS實(shí)現(xiàn)為動(dòng)態(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原生實(shí)現(xiàn)
// 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部分實(shí)現(xiàn)
$("#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/>");
});
});
//為動(dòng)態(tài)創(chuàng)建的html標(biāo)簽元素添加事件
$("#nep").live("click",function(){
var that=$(this);//獲取當(dāng)前點(diǎn)擊的this對(duì)象
console.log(that.text());
});
</script>
</body>
</html>
運(yùn)行結(jié)果:

PS:關(guān)于javascript事件說明可參考本站javascript事件與功能說明大全:http://tools.jb51.net/table/javascript_event
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript獲取元素尺寸和大小操作總結(jié)
- javascript數(shù)組操作(創(chuàng)建、元素刪除、數(shù)組的拷貝)
- js/jQuery對(duì)象互轉(zhuǎn)(快速操作dom元素)
- JS實(shí)現(xiàn)數(shù)組簡單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作示例
- js中數(shù)組插入、刪除元素操作的方法
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- 一個(gè)JavaScript操作元素定位元素的實(shí)例
- JavaScript中用sort()方法對(duì)數(shù)組元素進(jìn)行排序的操作
- js有關(guān)元素內(nèi)容操作小結(jié)
- JavaScript操作元素實(shí)例大全
相關(guān)文章
利用JS輕松實(shí)現(xiàn)獲取表單數(shù)據(jù)
本文主要介紹了利用JS輕松實(shí)現(xiàn)獲取表單數(shù)據(jù)。方法有別于原始的做法,大家可以試著找原始做法與本文所說方法之間的區(qū)別。有興趣的朋友可以看下,希望對(duì)大家有所幫助2016-12-12
uni-app動(dòng)態(tài)修改主題色的方法詳解
最近在看uniapp開發(fā)app時(shí)需要實(shí)現(xiàn)動(dòng)態(tài)修改主題色的功能,這篇文章主要給大家介紹了關(guān)于uni-app動(dòng)態(tài)修改主題色的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
一個(gè)很酷的拖動(dòng)層的js類,兼容IE及Firefox
自己優(yōu)化修改了網(wǎng)上的一個(gè)JS拖動(dòng)類,增加了拖動(dòng)時(shí)顯示半透明的特效。2009-06-06
js+html5實(shí)現(xiàn)canvas繪制圓形圖案的方法
這篇文章主要介紹了js+html5實(shí)現(xiàn)canvas繪制圓形圖案的方法,涉及html5圖形繪制的基礎(chǔ)技巧,需要的朋友可以參考下2015-06-06
在Node.js中使用Javascript Generators詳解
下面小編就為大家?guī)硪黄贜ode.js中使用Javascript Generators詳解。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05
javascript按指定格式輸出文件最后更新時(shí)間
javascript按指定格式輸出文件最后更新時(shí)間...2007-08-08
JS中IP地址與整數(shù)相互轉(zhuǎn)換的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS中IP地址與整數(shù)相互轉(zhuǎn)換的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-04-04

