zoukankan      html  css  js  c++  java
  • 为动态生成的html元素增加事件处理

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

  • 相关阅读:
    golang实现dns域名解析(一)
    互联网协议入门(一)(转)
    DNS入门(转)
    随笔:Golang 时间Time
    mysql查询某一个字段是否包含中文字符
    screen状态变Attached连接会话失败
    golang :连接数据库闲置断线的问题
    神奇的GO语言:空接口(interface)
    Go语言:变参函数
    go语言:函数参数传递详解
  • 原文地址:https://www.cnblogs.com/goody9807/p/960396.html
Copyright © 2011-2022 走看看