jQuery动态添加html元素后,响应事件的问题记录
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的元素的点击事件 可以响应。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。