如何为页面动态生成的元素添加事件(如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" οnchange="change(this)" /><input type="button" value="删除"  οnclick="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" οnchange="change(this)"  /><input type="button" value="删除"  οnclick="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>

                                                                                                                                                                                                                  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值