jQuery-爲動態添加的元素綁定事件

爲動態添加的元素綁定事件有以下幾種方式：

1.delegate()：向匹配元素的當前或未來的子元素附加一個或多個事件處理器

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

目前大多數jquery版本都可用，不過我一般不用它。

 $("#searchMoveVideoResult").delegate("ul li","click",function(){
    $(this).css("border","5px solid #000");
});

$("#searchMoveVideoResult").delegate("click","ul li",function(){
    $(this).css("border","5px solid #000");
});

看出它們的不同了嗎，第二種寫法是錯誤的，記住一定要把事件寫在元素的後面。

2.live()：爲當前或未來的匹配元素添加一個或多個事件處理器

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

jquery1.8版本以前推薦使用該方法；jquery1.8版本之後就不建議使用了，我試了下，也是無效的，所以高版本的jquery推薦使用on()方法綁定事件。

$("#searchMoveVideoResult ul li").live("click",function(){
     $(this).css("border","5px solid #000");
});

3.on()：適用於當前及未來的元素（比如由腳本創建的新元素）

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

試驗了下，大多數版本的jquery都是支持這個方法的，也是我比較喜歡使用的方法。

$("#searchMoveVideoResult").on("click","ul li",function(){
    $(this).css("border","5px solid #000");
});

//下面這樣寫就是錯的了，一定要把動態添加的元素放到on()方法裏面才行。</span>

$("#searchMoveVideoResult ul li").on("click",function(){
    $(this).css("border","5px solid #000");
});