这几天用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. 12503 - Robot Instructions

      Robot Instructions  You have a robot standing on the origin of x axis. The robot will be given som ...

  2. Android开发（22）--seekBar采用handler消息处理操作

    本案例简单实现进度条可走,可拖拽的功能,下面请看源码: 布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/ ...

  3. IDEA异常解决: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    有时候解决问题不仅仅是解决问题.-----jstarseven 最近因为开发需要,需要搭建一个ssm开发框架,采用了开发工具IDEA. 整合完了SSM开发框架之后,发布的时候出现org.apache. ...

  4. 【微信开发】【Asp.net MVC】-- 微信分享功能

    内嵌在微信中的网页,右上角都会有一个默认的分享功能.如下图所示,第一个为自定义的效果,第二个为默认的效果.实现了自定义的分享链接是不是更让人有点击的欲望?下面讲解下开发的过程. 一.准备,设置js接口 ...

  5. Hibernate介绍和入门案例

    一身转战三千里,一剑曾当百万师 如果你在之前没有学过SSH三大框架,那么你之前肯定是通过JDBC来对数据库进行操作.现在,你完全可以把跟数据库交互的操作直接交给Hibernate. Hibernate ...

  6. linux 学习-软件的安装

    Linux软件的安装rpm -ivh安装软件全名 -i install 安装 -v verbose 显示详细信息 -h hash 显示进度 --nodeps 不检测依赖性(不推荐使用) rpm -U ...

  7. 学习Sass（二）

    前面简单介绍了sass的安装,特点和使用方法等,这里记录下sass的基本语法. 1.变量 2.运算 3.嵌套 4.代码复用 5.高级语法 6.自定义函数 一.变量 变量以$开始,像css属性那样赋值, ...

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

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

  9. python中的二维数组90度旋转

    data=[[col for col in range(4)] for raw in range(4)] #创建一个二维数组 for n in data: print (n) print('\n') ...

  10. VsVim的快捷键使用

    .插入命令(可配合数字使用) i 在当前位置前插入 I 在当前行首插入 a 在当前位置后插入 A 在当前行尾插入 o 在当前行之后插入一行 O 在当前行之前插入一行 ni/a/o/I/A/O<E ...