1. 程式人生 > >如何為頁面動態生成的元素新增事件(如append()動態新增的標籤)

如何為頁面動態生成的元素新增事件(如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>