如何為頁面動態生成的元素新增事件(如append()動態新增的標籤)
這是一個上傳圖片的頁面,我們要在前臺用JS驗證上傳的圖片是否合法,且能夠動態生成多個上傳框。
原始碼:
<code>
<script type="text/javascript" src="js/jquery-easyui-1.4.3/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
i = 1;
j = 1;
$(document).ready(function(){
$("#btn_addGoodsImage").click(function(){
if(i>4){
alert("最多隻能上傳5張圖片");
return ;
}
$("#goodsImage").append('<div id="divGoodsImage_'+i+'"><input class="upload" name="file'+i+'" type="file" onchange="change(this)" /><input type="button" value="刪除" onclick="delGoodsImage('+i+')"/></div>');
i = i + 1;
});
$("#btn_addDetails").click(function(){
if(j>4){
alert("最多隻能上傳5張圖片");
return ;
}
$("#goodsImageDetails").append('<div id="divDetails_'+j+'"><input class="upload" name="details_'+j+'" type="file" onchange="change(this)" /><input type="button" value="刪除" onclick="delDatails('+j+')"/></div>');
j = j + 1;
});
/* $(":file").change(function(){
var name = $(this).val();
var extArray = ['jpg','png'];
var ext = name.substring(name.lastIndexOf('.')+1);
//alert(ext);
if(extArray.indexOf(ext)==-1){
$(this).val('');
alert("只能上傳jpg或png格式的圖片!");
}
}); */ //這種方法只能驗證在最初時的檔案框,不能監聽到後面append進去的檔案框,並且通過標籤的類名新增監聽也一樣
});
function change(obj){ //此種方法為每個生成的標籤在其中新增 onchange事件並指定它的監聽函式為change(this).
var name = $(obj).val();
var extArray = ['jpg','png'];
var ext = name.substring(name.lastIndexOf('.')+1);
//alert(ext);
if(extArray.indexOf(ext)==-1){
$(obj).val('');
alert("只能上傳jpg或png格式的圖片!");
}
}
function delGoodsImage(index) {
document.getElementById("goodsImage").removeChild(
document.getElementById("divGoodsImage_" + index));
i--;
}
function delDatails(index) {
document.getElementById("goodsImageDetails").removeChild(
document.getElementById("divDetails_" + index));
j--;
}
</script>
</code>