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也是追加的，知道原因所在，便可解决问题。