由于实际的需要，有时需要往网页中动态的插入HTML内容，并在插入的节点中绑定事件处理函数。我们知道，用Javascript向HTML文档中 插入内容，有两种方法，

一种是在写HTML代码写入JS，然后插入到文档中；

另外一种是通过ajax的方式，从服务器获取数据，然后用js把获取的数据经 过处理后插入文档中；

两种方法各有特点，本文将分析新插入到文档中的元素的事件绑定问题，并假定新插入的对象不做内联的事件绑定（即不用类似 <a onclick=””>的形式）。所有的示例将会用到jQuery和原生Javascript。

情况一: HTML代码存放在JS中,请看以下代码:

    <body>

    <p>第1行内容</p>

    <p>第2行内容</p>

    <p>第3行内容</p>

    <script>

    var appendhtml=document.createElement("p");

    appendhtml.innerHTML="这是插入的内容";

    document.body.appendChild(appendhtml);

    var nodep=document.getElementsByTagName("p");

    for (var i=0;i<nodep.length;i++){

    nodep[i].onclick=function(){

    console.log("Click Event!");

    }

    }

    </script>

    </body>

上面的代码是用原生的Javascript生成的，当此代码执行时，js会在页面中生成第四个P标签，且点击这四个标签的时候，都会触发相应的动 作。那么是不是就是说，用js生成的HTML内容，都可以被绑定相应的事件呢？答案是否定的，在上面代码的script标签中，有两个代码段，代码段一是 用来向HTML中插入内容的，代码段二是用来绑定事件的，如果把代码段一和代码段二互换位置，发现JS生成的第四个P标签没有绑定上click事件。用以 下代码的jquery测试:

1
2
3
4
5
6
$(function(){
$("p").click(function(){
console.log("Click Event");
})
$("<p>这是生成的内容</p>").appendTo("body");
})

发现结果也一样，事件执行成功与否也代码段的顺序有直接的关系。其实原来很好分析，无论是利用getElementsByTagName还是jquery的选择器，当需要的内容还没有被插入时，选择器只会选择页面中已经存在的元素，所以事先没有存在元素是绑定不了事件的。

但是，实际情况是，工作中有可能需要把后来生成的元素绑定上事件，并注册上事件处理函数。例如本网站的留言系统，第一次加载只会显示固定条数的评 论，如果评论超过一定数量，剩下的会用ajax的方式进行加载。所有的留言最后都有个回复功能，点击可以恢复相应的留言，也就是说，动态加载上来的留言， 也许要绑定click事件，并注册上回复留言的函数。当然偷懒的方法是，为ajax加载上来的内容再注册一个click并再绑定一次相应的函数，但这加大 了代码的冗余度，增加系统开销，还会使代码变得难以理解。那么更好的解决办法是什么呢？

留言系统的回复功能

可以这样理解，无论HTML内容是不是JS生成的，只要没有跨域，所有页面内的元素都属于这个页面，都能够绑定事件，JS中有个非常重要的概念叫事件冒泡，简单来讲，就是子元素产生的事件，会一直冒泡到最顶级父元素，并能够被父元素监测到。请看下图：

事件冒泡

那么，我能不能在被插入元素的父元素上监测冒泡产生的事件，并回调相应的函数呢？答案是当然是肯定的。来看下面的例子，注意网页面里插入内容是在JS代码的最后。

    <script>

    $(function(){

     $("body").delegate("p","click",function(){

        console.log("Click Event");

     })

    $("<p>这是生成的内容</p>").appendTo("body");

    })

    </script>

这是，发现所有的P元素点击都产生了输出，说明代码运行成功。这里我们用到了jQuery的delegate函数，来看一下官方解释:

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
根据特定的根元素，把一个或者多个事件注册到指定的元素上，不论这个元素现在是否存在。

在jQuery1.7.3以上的版本中，on方法也可以做这件事，官方有示例说明，这里不再赘述。

比如有一些情况多次从后台获取动态内容到前台，点击的时候会触发多次，还要使用  $("body").undelegate();  解除之前的绑定 然后再一次重新绑定。

1
2
3
4
$("body").undelegate();
$("body").delegate(".reply_check_btn", "click", function () {
    alert('adsadsa');
});

JavaScript给动态插入的元素添加事件绑定的更多相关文章

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

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

  2. jquery中为动态增加的元素添加事件

    // html代码 <ul id="main"> </ul> // js代码 $(function(){ // 动态添加html代码 $("#ma ...

  3. 使用addeventlistener为js动态创建的元素添加事件监听

    点击li弹出内容,并且动态添加li之后有效 <button onclick="addFunction()">点我增加</button> <ul> ...

  4. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  5. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

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

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

  7. 给DOM生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  8. 通过原生JS实现为元素添加事件

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...

  9. 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

    使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

随机推荐

  1. shell getopts用法详解

    本文链接:https://blog.csdn.net/u012703795/article/details/46124519 获取UNIX类型的选项: unix有一个优点就是标准UNIX命令在执行时都 ...

  2. 2018-10-01-weekly

    Algorithm 77. 组合 What 给定两个整数 n 和 k,返回 1 ... n 中所有可能的 k 个数的组合. How 利用递归的思想,当凑够k个数时,就回退回去,remove掉一个数,在 ...

  3. 前端面试题：不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标,，怎么实现好？

    昨天,看这道题,脑子锈住了,就是没有思路,没看明白是什么意思?⊙﹏⊙|∣今天早上起床,想到需要思考一下这个问题. 当然,我没想明白为什么要这样做?(创建一个长度为100的数组,并且每个元素的值等于它的 ...

  4. Python---基础---爱因斯坦阶梯问题

    写一个程序,打印出0-100所有奇数 ls = range(0, 101)for i in ls: if i % 2 == 1: print(i)--------------------------- ...

  5. dede标签大全

    想必很多人对后台不熟悉,并且觉得很难.其实不难,只是你们没有找到合适的方法学习而已!只有找到一个合适的学习方法,不管做什么事情,我想都很容易.学习讲究的是效率,而效率又是由思路决定的.就拿网页制作来说 ...

  6. python之路----操作系统的发展史

    阅读目录 手工操作 —— 穿孔卡片 批处理 —— 磁带存储和批处理系统 多道程序系统 分时系统 实时系统 通用操作系统 操作系统的进一步发展 操作系统的作用 手工操作 —— 穿孔卡片 1946年第一台 ...

  7. 攻防世界 | when_did_you_born

    所以题目要求是输入生日1926 payload: from pwn import * io = remote("111.198.29.45",40803) io.recvline( ...

  8. [CSP-S模拟测试]:巨神兵（状压DP）

    题目描述 欧贝利斯克的巨神兵很喜欢有向图,有一天他找到了一张$n$个点$m$条边的有向图.欧贝利斯克认为一个没有环的有向图是优美的,请问这张图有多少个子图(即选定一个边集)是优美的?答案对$1,000 ...

  9. 如何安全修改cocoapods上的第三方代码

    其实搞java的都知道maven管理,解决第三方代码修改的办法就是架一个服务器,把这些修改的库放在这里,然后再maven里配置哪些需要用本地仓库的.其实cocoapods也可以做本地包管理: 大致方法 ...

  10. String 类的常用方法

    format 是String类的一个非常有用的静态函数,可以将各类数据格式化为字符串并输出.其中format参数指定了输出的格式 toCharArray方法可以将字符串转为字符数组 getBytes方 ...