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

  • 相关阅读:
    python 元组操作
    python安装(python2.7)
    0、
    1、Centos 7 系统的初化始配置
    C# 6.0新特性
    ios学习之路
    Can 't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock '(2) ;
    px,em,rem,vw单位在网页和移动端的应用
    html5shiv.js和respond.min.js
    display:inline-block间隙问题
  • 原文地址:https://www.cnblogs.com/goody9807/p/960396.html
Copyright © 2011-2022 走看看