为动态生成html元素增加事件处理

转自: http://www.enet.com.cn/article/2007/1122/A20071122920804.shtml


Adding OnClick property to dynamicly genertated html element 

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"); 

你可能感兴趣的:(为动态生成html元素增加事件处理)