在使用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);
})