jquery动态生成html代码绑定事件

　　今天工做中须要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),因而在网上找了不少解决办法,不少都比较复杂,且使用的jquery都比较老,因而结合网上加上本身的测试,找到了一种解决方法。

　　我使用的jquery是1.9.11,jquery1.7以后就将live方法废弃了,新增了on和off方法,个人解决办法就是使用on方法,首先看代码：

    <div class="h3">
        <h3>李健1</h3>
        <h3>李健2</h3>
        <h3>李健3</h3>
        <h3>李健4</h3>
        <h3>李健5</h3>
    </div>
    <div class="div">增长</div>        

　　　　$(function(){
            $(".div").click(function(){
                var h = "";
                for(var i=0;i<5;i++){
                    h += "<h3>李健"+i+i+"</h3>";
                }
                $(".h3").append(h);
            });
　　　　});
//这里我每点击增长一次会在<div class="h3">最后增长5行<h3>李健i</h3>,我如今要让全部的<h3>都绑定click事件(包括动态生成的)

　　$(".h3").on("click","h3",{foo:"文本:"},function(event){
　　　　alert(event.data.foo+this.textContent);
　　});

  是否是很简单,这里选择<div class="h3">做为父元素调用on方法绑定click事件,这样父元素下的全部元素都绑定了click事件,有时候并不须要全部的都绑定,那怎么办？好办,只需在"click"后增长选择器(也就是你想选定的子元素),{foo:"文本:"}:表示传给event.data的数据(参数),在处理函数中咱们能够调用event.data.foo读取到传入的函数值。打开浏览器调试工具你还能够获取<h3>中的文本,我这里是this.textContent,你们能够根据实际状况发挥。

　　总之,记住若是你要绑定动态生成的元素事件，必定要先找到他的父元素(父元素不能是动态生成的,不然继续往上找),在父元素中绑定，而后再进行过滤就ok了,对了，我测试了hover事件发现不行,没去深究缘由。