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

  • 相关阅读:
    CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset
    用php实现一个简单的链式操作
    关于php语言的使用!
    NSCalendar NSDateComponents
    IOS 谓词
    NSDate
    IOS asc码替换
    帝国CMS内容模板IF判断
    帝国CMS列表模板页面内容截取
    ios 获取崩溃日志
  • 原文地址:https://www.cnblogs.com/goody9807/p/960396.html
Copyright © 2011-2022 走看看