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

  • 相关阅读:
    Visual Studio 20年
    cocos2d-x 重力感应 加速器的使用
    大规模高性能站点架构设计思路整理
    MySQL
    drools 的一个小demo
    springboot使用hibernate validator校验
    mybatis JdbcTypeInterceptor
    ColorPic 一套簡單好用的顏色選擇器!
    WebStorm ES6 语法支持设置
    css中单位em和rem
  • 原文地址:https://www.cnblogs.com/goody9807/p/960396.html
Copyright © 2011-2022 走看看