JS给动态追加绑定事件

 $img = "<td>
    <input type='hidden' id='img{$k}' name='item[$item_key][img_id]' value='{$keyspecgoodsprice[$item_key][img_id]}'>
	<div id='container'>
		<button class='btn btn-primary pickfiles' type='button' name='pickfiles' id='pickfiles{$k}' data-key='{$k}' style='height: 30px;line-height: 8px;'>选择图片</button>
		<button class='btn btn-primary' type='button' name='pickfiles' id='uploadfiles{$k}' style='display: none'>开始上传</button>
		 <ul id='file-list{$k}'>
		 </ul>
	</div>
</td>";

使用ajax 给ul 下面追加li 标签等:

在给span,点击事件,效果为点击span,清除li标签一下内容:

1. 正常html页面中,使用js点击事件:

$(".close").on('click',function(){
    var img_id = $(this).attr("img_id");
    var img = $("#img");
    var items=img.val().split(",");
    var index = items.indexOf(img_id);
    items.splice(index,1);//删除元素
    img.val(items.join(','));
    $(this).parent().remove();
    $("#pickfiles").show();
});

2.使用ajax追加后发现这样点击是不会起作用的,原因是追加后没有找到具体标签的类或者id,解决办法是找追加的类或者id作为父级,在进行绑定,点击事件:

$("#file-list0").on('click',".close",function(){
    var img_id = $(this).attr("img_id");
    var img = $("#img");
    var items=img.val().split(",");
    var index = items.indexOf(img_id);
    items.splice(index,1);//删除元素
    img.val(items.join(','));
    $(this).parent().remove();
    $("#pickfiles").show();
});

重要说明:不管js里面怎么追加,只要找到追加的那个标签,就可以进行绑定事件(实在不行可以从body,找下去)。

注释:该代码可能存在问题,我项目中ul也是追加的,知道原因所在,便可解决问题。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页