jquery html 动态添加元素绑定事件

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

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

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

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

状况一: 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测试:jquery

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

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

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

留言系统的回复功能跨域

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

事件冒泡app

那么，我能不能在被插入元素的父元素上监测冒泡产生的事件，并回调相应的函数呢？答案是固然是确定的。来看下面的例子，注意网页面里插入内容是在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(); 解除以前的绑定而后再一次从新绑定。

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

转载自(稍加修改)：http://www.mamicode.com/info-detail-618302.html