jquery input 标签change事件只能触发一次的解决办法【转】

        这个问题并不是由change事件失效造成的,而是ajaxFileUpload插件造成的,它会把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了,需要重新绑定一下。

     $('#uploaderInput').on("change",function() {
            $.ajaxFileUpload({
                url : '/upload/imageUpload',   //提交的路径
                secureuri : false, // 是否启用安全提交,默认为false
                fileElementId : 'uploaderInput', // file控件id
                dataType : 'json',
                data : {
                    fileName : $('#uploaderInput').val()   //传递参数,用于解析出文件名
                }, // 键:值,传递文件名
                success : function(data, status) {
                    if (data.error == 0) {
                        var src = data.src;
                        $('#uploaderFiles').append("<img class='weui-uploader__file weui-uploader__file_status' src='" + src + "' style='width:100%;height:100%'>");
                        $("#uploaderInput").val("");
                        // 存储已上传图片地址
                        var oldSrc = $('.pictureSrc').val();
                        var newSrc = "";
                        if (oldSrc != "")
                            newSrc = oldSrc + "," + src;
                        else
                            newSrc = src;

                        $('.pictureSrc').val(newSrc);   //保存路径
                    } else {
                        alert(data.message);
                    }
                },
                error : function(data, status) {
                    alert(data.message);
                }
            });
        });

<input type=”file” value=”” name=”logo_name” id=”logo_name”> 
jquery绑定事件只走一次,找了好多办法都不行 
今天我来把这个神秘的问题给解决一下,希望能帮助大家 
$(document).off(‘change’,’#logo_name’).on(‘change’,’#logo_name’,function(){ 
alert(“ok”); 
});这么去写,就把change执行一次给解决掉了,因为on是绑定了结点,jquery绑定结点的时候只需绑定一次就行了。不能重复绑定,off是将结点移除,移除完之后在重新绑定,这样就可以解决了change执行一次的问题

$(document).off('change','#uploaderInput').on('change','#uploaderInput',function(){
        $.ajaxFileUpload({
            url : '/upload/imageUpload',   //提交的路径
            secureuri : false, // 是否启用安全提交,默认为false
            fileElementId : 'uploaderInput', // file控件id
            dataType : 'json',
            data : {
                fileName : $('#uploaderInput').val()   //传递参数,用于解析出文件名
            }, // 键:值,传递文件名
            success : function(data, status) {
                if (data.error == 0) {
                    var src = data.src;
                    $('#uploaderFiles').append("<img class='weui-uploader__file weui-uploader__file_status' src='" + src + "' style='width:100%;height:100%'>");
                    $("#uploaderInput").val("");
                    // 存储已上传图片地址
                    var oldSrc = $('.pictureSrc').val();
                    var newSrc = "";
                    if (oldSrc != "")
                        newSrc = oldSrc + "," + src;
                    else
                        newSrc = src;

                    $('.pictureSrc').val(newSrc);   //保存路径
                } else {
                    alert(data.message);
                }
            },
            error : function(data, status) {
                alert(data.message);
            }
        });
    });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值