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);
})