jQuery-为动态添加的元素绑定事件(以及不重复添加新的内容)

在使用jQuery的方式为元素绑定事件时，我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的方式请求远程数据来动态添加页面元素时，显然以上几种绑定事件的方式是无效的

$(selector).bind(event,data,function)$(selector).click()

eg:点击新建分类,弹窗添加类名,点击确定按钮,会新增一条,点击新增的这条会展开折叠显示下面内容

html

    <a href="javascript:;" class="layui-btn layui-btn-small layui-btn-primary" id="new_sort">新建分类</a>    <div id="Show" ref="fj" class="all-attachInfo">        <div class="wrap-deptModify">            <div class="title"><span class="addTitle">身份证</span><span>(4)</span>                <a class="button" href="#"><i class="layui-icon">&#xe61a;</i></a>            </div>            <div class="wrap-upload" hidden>                <div class="item-col-4">                    <a href="javascript:;" class="">                        <img src="../public/images/sfz.png" class="viewer-toggle docs-pictures" data-original="../public/images/sfz.png">                        <span class="closeThis"></span>                    </a>                    <p>申请人身份证个人信息面</p>                </div>            </div>        </div>    </div>    <div id="layer_sort" class="layui-form" hidden="hidden">        <div class="layui-form-item">            <label class="layui-form-label">类名:</label>            <div class="layui-input-inline">                <input type="text" class="layui-input">            </div>        </div>    </div>

为动态添加的元素绑定事件有以下几种方式：

1.delegate()：向匹配元素的当前或未来的子元素附加一个或多个事件处理器(目前大多数jquery版本都可用，不过我一般不用它。)

$(selector).delegate(childSelector,event,data,function)

$("#Show").delegate(".title","click",function(){        $(this).toggleClass("active");        $(this).parents('.wrap-deptModify').find('.wrap-upload').slideToggle()})

2.live()：为当前或未来的匹配元素添加一个或多个事件处理器(query1.8版本以前推荐使用该方法；jquery1.8版本之后就不建议使用了，我试了下，也是无效的，所以高版本的jquery推荐使用on()方法绑定事件。)

$(selector).live(event,data,function)

$(".title").live("click",function(){          $(this).toggleClass("active");    $(this).parents('.wrap-deptModify').find('.wrap-upload').slideToggle()}); 

3.on()：适用于当前及未来的元素（比如由脚本创建的新元素）

$(selector).on(event,childSelector,data,function,map)

$("#Show").on("click",".title",function(){    $(this).toggleClass("active");    $(this).parents('.wrap-deptModify').find('.wrap-upload').slideToggle()})

(4).onclick事件：动态添加数据时，就为元素绑定onclick事件(不重复添加新内容)

$("#new_sort").click(function(){        $("#layer_sort input").val('');        var time=new Date().getTime();        layer.open({            type: 1,            title:"新建附件分类",            content: $('#layer_sort'),            btn:['确定','取消'],            btnAlign: 'c',            yes:function(){                var txt=$("#layer_sort input").val();                var addL='<div class="wrap-deptModify">'+                           '<div class="title" onclick="switchTag(this)"><span class="addTitle'+time+'"></span> <span>(1)</span>'+                               '<i class="layui-icon"></i>'+                           '</div>'+                           '<div class="wrap-upload">'+                               '<div class="item-col-4">'+                                   '<a href="javascript:;">'+                                       '<img src="../public/images/upload-mr.png" class="img-default">'+'<img src="../public/images/img-upload.png" class="img-upload">'+                                   '</a>'+                                   '<p>收入证明</p>'+                               '</div>'+                           '</div>'+                       '</div>'                 $("#Show").append(addL);                 $(".title .addTitle"+time ).text(txt)                 layer.closeAll();              }        })      })function switchTag(ele){    $(ele).toggleClass("active");    $(ele).parents('.wrap-deptModify').find('.wrap-upload').slideToggle();}$(".title").click(function(){    switchTag(this);})