jQuery为动态生成的元素添加事件

我们会使用jQuery动态地生成许多子元素。

 $("#canvas").append("<img id='oImg' class='z-index' src='imgURL'>");
 //父元素#canvas添加子元素#oImg

但是我们同时希望为jQuery动态生成的子元素(#oImg)添加响应事件，这时候使用传统的方法，

 $("#oImg").click(function(event){
    ....
    ...
 });

往往会失败。事件无法得到响应。这时候需要使用jQuery中的 delegate()函数。

delegate() 方法

：为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

语法

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

参数

childSelector 必需。规定要附加事件处理程序的一个或多个子元素。

event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data 可选。规定传递到函数的额外数据。

function 必需。规定当事件发生时运行的函数。

所以为动态生成的元素添加事件：

$("#canvas").delegate("#oImg","click",function(){
    ......  
});