这几天用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. 弃用个人博客站重返CSDN缘由

    最近悄然关闭了自己的个人博客小站,重新返回了CSDN写博客.恰逢周末,闲暇尚有,敲击键盘记录一下. 其实最初关闭个人基于SAE的个人博客站是一周前开始的,想想自己的博客已经有两周年多的时间了,刚刚创建 ...

  2. PHP curl之爬虫初步

    php的curl可以实现模拟http的各种请求,这也是php做网络爬虫的基础,也多用于接口api的调用. 这个时候有人就要发问了:为什么你特么不用file_get_contents? curl的性能比 ...

  3. angularJS自定义 过滤器基础

    先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...

  4. Volt 模块引擎与phalcon框架组合使用指南

    ---- 近期工作中web页面使用由C语言编写的VOLT模板引擎,相比之前由js动态加载页面速度更快,更利于百度数据的抓取,现根据文档整理一下使用思路 (Volt是一个超快速和设计者友好的模板语言,C ...

  5. 使用pip安装报错的处理方法_2

    终端更新pip出错 sudo pip install --upgrade pip : 1.ReadTimeoutError: HTTPSConnectionPool(host='pypi.Python ...

  6. 使用KindEditor富文本编辑器，点击批量上传按钮没有选择图片按钮

    问题:批量上传没有选择图片按钮

  7. 安装Java Cer证书

    skldfsdf  Javaawtetwetwetwetwe testse Java estestset

  8. 【01背包】HDU 2546 饭卡

    Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submission(s) ...

  9. mysql 5.5 mysqldump备份原理

    开启general_log日志,获取mysqldump执行语句 show VARIABLES like 'general_log%' set GLOBAL general_log=on 执行备份命令 ...

  10. Android学习---- 十月

    //因为域名去备案了 //PHP的学习想停一下,刚好说什么Java要开始实验课了 //暑假看的Java都生疏了,就想顺便学一下Android,熟悉一下Java的语法也好,顺便学学新东西 //昨天域名备 ...