1. 程式人生 > >jquery on()繫結事件無效

jquery on()繫結事件無效

今天在做專案的過程中遇到了jquery 動態生成的元素繫結事件的問題。

首先我目前所瞭解的是

(1)用bind或者直接給元素加事件(例如click)這種的是對於頁面初始化就有的元素

(2)對於後面動態生成的元素無效,例如append(某動態生成元素),這種用以上的方法無效

為了使動態生成的元素能繫結事件,我網上查了一番,聽說on可以動態繫結事件,我試了一下沒有效果,糾結了很久,最終發現原因。

jquery使用on繫結事件到動態生成的元素上時,不能對動態生成的物件操作,需要從其父節點追溯到本身。

下面是js:

//有效,追溯到本身
$('#centerUlList').on("click","li",function(){
 	    $('input[name="godate"]').val($(this).attr("date"));
 	    searchform.action="searchsimple.action";
 	    searchform.submit();
}); 

//無效                                               
$('#centerUlList li').on("click",function(){
 	    $('input[name="godate"]').val($(this).attr("date"));
 	    searchform.action="searchsimple.action";
 	    searchform.submit();
}); 
綜上動態生成的元素繫結事件用on要注意追溯到元素本身,另外一點on的效能高於live(),bind(),delegate()等方法。