这几天用zepto.js写了不少事件，突然想到一个问题，那就是原生的js如何给动态生成的标签添加事件？因为这些标签都是后来通过ajax或者运行其他点击事件生成的，那么如果之前给他们写事件他们这个dom对象是找不到的，jq通过事件委托解决了这个问题，但是原生js这个问题该怎么解决呢？我在网上查了很多资料，好像只有一种办法，那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件，如果有更好的方法，欢迎提出来。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="a">我是初始就有的div </div>

</body>

<script type="text/javascript">

window.onload = function () {

    var myp = document.createElement('p');

    document.getElementById('a').appendChild(myp);

    alert(document.getElementsByTagName('p')[])

    myp.innerHTML = '我是新建的p标签';

document.getElementsByTagName('p')[].onclick = function(){

        alert('我是p的点击事件')

    }

}

</script>

</html>

原生js怎么为动态生成的标签添加各种事件的更多相关文章

  1. jquery中对动态生成的标签响应click事件（二）…与ajax交互使用

    <%@ page language="java" contentType="text/html; charset=GB18030" pageEncodin ...

  2. jquery中对动态生成的标签响应click事件（一）

    参考自:http://my.oschina.net/lishixi/blog/31612 <%@ page language="java" contentType=" ...

  3. iOS中动态注入JavaScript方法。动态给html标签添加事件

    项目中有这样一种需求,给html5网页中图片添加点击事件,并且弹出弹出点击的对应的图片,并且可以保持图片到本地 应对这样的需求你可能会想到很多方法来实现. 1. 最简单的方法就是在html5中添加图片 ...

  4. jq给动态生成的标签绑定事件的几种方法

    经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2" ...

  5. 动态生成li标签，并设置点击事件

    今天要解释的是如下界面              主要实现了: 1.模拟后台的json数据,动态生成li标签 2.导航栏的下划线 3.给li标签右边设置图片 4.动态生成的li标签,设置选中的li的点 ...

  6. js如何实现动态在表格中添加标题和去掉标题？

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  7. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

  8. a 标签添加 onclick 事件

    a 标签添加 onclick 事件 <a href="javascript:void(0);" οnclick="js_method()">点击&l ...

  9. jquery动态生成的元素添加事件的方法

    动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...

随机推荐

  1. 理解git对象

    1. 首次提交,提交一个简单的文件 a.txt ,commit 之后的图如下:   如图所示,生成了 3 个对象,一个 commit 对象,一个 tree 对象,一个 blob 对象.图上蓝底是 co ...

  2. 文件上传<springmvc>

    使用commons-fileupload-1.3.1.jar和commons-io-2.4.jar web.xml <?xml version="1.0" encoding= ...

  3. openresty 前端开发轻量级MVC框架封装一（控制器篇）

    通过前面几章,我们已经掌握了一些基本的开发知识,但是代码结构比较简单,缺乏统一的标准,模块化,也缺乏统一的异常处理,这一章我们主要来学习如何封装一个轻量级的MVC框架,规范以及简化开发,并且提供类似p ...

  4. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  5. Vs2015 Ef 连接Oracle 出现OracleInternal.Common.ConfigBaseClass 的解决办法

    如果配置没问题的话,就是 Oracle.ManagedDataAccess 在全局程序集的版本问题 解决方法方法 将Oracle.ManagedDataAccess  GAC全局程序集中移除 1:用C ...

  6. [SOJ] Babelfish

    Description You have just moved from Waterloo to a big city. The people here speak an incomprehensib ...

  7. 定位（position）

    position :属性规定元素的定位类型 语法: position : static | absolute | fixed | relative JavaScript语法:object.style. ...

  8. centos安装ganttproject

    官网下载 http://www.ganttproject.biz/ 我的JAVA早已经安装了. 问题:root #ganttproject 提示org.bardsoftware.eclipsito.B ...

  9. 最近一段时间get到的小知识（c++的）

    (1)查看一个程序运行的时间 int main() { clock_t start,end; start=clock(); ... end=clock(); cout<<"Run ...

  10. mimi

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...