varli="<li>"+"<a>"+//缩略图点击部分index='"+i+"'"<spanclass='CameraImg'type='play'index='"+i+"'>"+"<imgsrc='/HiHomeBabyMS/Public/img/img.jpg'/>"+"<spanclass='CameraPlay'></span>"+"</span>"+//video信息部分,修改名称删除"<spanclass='CameraInfoVideoName'type='edit'video_id='"+video['video_id']+"'>"+video['name']+"</span>"+"<spanclass='CameraInfo'type='delete'>"+"<iclass='IconView'></i>"+record+"<iclass='DeleteVideo'id='delete_"+i+"'index='"+i+"'></i>"+"</span>"+"</a>"+"</li>";$("#CameraUl").append(li);


如上,动态添加html元素后,响应事件的添加方法:

$("#InnerMainId#CameraUl").unbind('click').on('click','li>a>span',function(){vartype=$(this).attr('type');if(type=="play"){varindex=$(this).attr('index');//TODO}elseif(type=="edit"){//修改//TODO}else{//删除//TODO}event.stopImmediatePropagation();});

这样可以为li中的各个元素添加不同的属性。而如下的分各个元素的添加点击事件的做法,会发生覆盖,即只能响应最后一个事件:

$(document).unbind('click').on('click','.CameraImg',function(event){//TODO});

$(document).unbind('click').on('click','.VideoName',function(event){//TODO});

$(document).unbind('click').on('click','.DeleteVideo',function(event){//TODO});

即只有类名为DeleteVideo的元素的点击事件 可以响应。