这几天用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. cocos2d(x) HTML label ;CCHTML CCHTMLLabel

    这几天由于特殊需要,写了一个HTMLLabel.可以直接支持HTML的几种格式,<font> <a href> color size 等等. 参考object C的一个ios开 ...

  2. 通过Jasmine和Guard自动测试JavaScript

    原文标题:Autotesting JavaScript with Jasmine and Guard 原文地址:http://edspencer.net/2013/06/15/autotesting- ...

  3. jvm内存JVM学习笔记-引用(Reference)机制

    在写这篇文章之前,xxx已经写过了几篇关于改jvm内存主题的文章,想要了解的朋友可以去翻一下之前的文章 如果你还不了解JVM的基本概念和内存划分,请阅读JVM学习笔记-基础知识和JVM学习笔记-内存处 ...

  4. Java垃圾回收机制的工作原理

    Java垃圾回收机制的工作原理 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 获取更多内容,请关注小编个人微信公众平台: 一.Java中引入垃圾回收机制的作用 ...

  5. GDKOI 2015 Day1 T2 单词统计Pascal

    我虽然没有参加GDKOI2015,但是我找了2015年的题练了一下. 题意如下: 思路:最大流,因为有多组数据,每次读入一组数据都要清零. a. 将每个点拆分成两个点,例如样例G→G`,再将字母一一编 ...

  6. html5后台界面

    Binary Admin Save Binary Admin is 100% free for personal & commercial use under MIT license. Liv ...

  7. pythong下的unittest框架

    今天有空测试了下TestSuit的执行顺序,用discover遍历过来的tests,用runner执行. 只会识别继承了unittest的测试类中的测试用例.按setup和teardown的顺序进行执 ...

  8. SqlDataReader中的GetSqlValue（）方法

    sdr.GetValue(0) "Title"sdr.GetValue(1)4sdr.GetValue(2)falsesdr.GetValue(3)0sdr.GetValue(4) ...

  9. Maven之（五）Maven仓库

    本地仓库 Maven一个很突出的功能就是jar包管理,一旦工程需要依赖哪些jar包,只需要在Maven的pom.xml配置一下,该jar包就会自动引入工程目录.初次听来会觉得很神奇,下面我们来探究一下 ...

  10. C# CookieHelper

    using System; using System.Web; using System.Collections.Specialized; namespace Utils { /// <summ ...