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