当前位置:首页>网络学院>网页制作>Javascript教程>文章内容

动态生成html元素并添加事件处理

[ 来源:http://www.it55.com | 作者: | 时间:2007-11-22 | 收藏 | 推荐 ] 【

function klik(){
alert("ppp");
}

function addNewImg(newImageId){
newImg = document.createelement('img');
newImg.id = "image"+newImageId;
newImg = document.getElementById("divimage1").appendChild(newImg);
newImg.onclick=klik
}

it works. The new image is created and after clicking on it "ppp" is alerted.

but when I use this:

function klik(ff){
alert(ff);
}

function addNewImg(newImageId){
newImg = document.createelement('img');
newImg.id = "image"+newImageId;
newImg = document.getElementById("divimage1").appendChild(newImg);
newImg.onclick=klik("ppp");
}

"ppp" is alerted in the moment of executing the statement newImg.onclick=klik("ppp"); and when clicking on the generated image nothing happens, even Javascript Console of Firefox stays blind.

 


function addNewImg(newImageId){
newImg = document.createelement('img');
newImg.id = "image"+newImageId;
newImg = document.getElementById("divimage1").appendChild(newImg);
var onC='ppEdit("image'+newImageId+'","image")';
document.getElementById("image"+newImageId).onclick=new Function(onC);
}

it works


maybe an object detection be great to add too
why?
So browsers that understand document.getElementById,
document.createelement execute the code.

function addNewImg(newImageId){
//object detection check
if (!document.getElementById &&!document.createelement){return;}
newImg = document.createelement('img');
newImg.id = "image"+newImageId;
newImg = document.getElementById("divimage1").appendChild(newImg);
var onC='ppEdit("image'+newImageId+'","image")';
document.getElementById("image"+newImageId).onclick=new Function(onC);
}


alternative solution:
if (!document.getElementById) {return;}
document.getElementById("image"+newImageId).onclick=function(){
ppEdit(this.id, "image");
}

(编辑:IT资讯之家 www.it55.com

返回顶部
 

网友评论

[以下评论为网友观点,不代表本站。请自觉遵守互联网相关政策法规,所有连带责任均有评论者自负。]
[不超过250字]

图片文章