powerApower
powerApower
采纳率23.1%
2017-09-06 11:12 阅读 933

jquery data() undifined

10
 //文件上传
                $("#fileuploadsave").click(function(){
                    $.ajaxFileUpload({
                        url: 'http://localhost:8080/Data/upload/uploads.do', //用于文件上传的服务器端请求地址
                        secureuri: false, //是否需要安全协议,一般设置为false
                        fileElementId: 'file1', //文件上传域的ID
                        dataType: 'json', //返回值类型 一般设置为json
                        success: function (result){ //服务器成功响应处理函数
                            var data=result.data;

                            for(var i=0;i<data.length;i++){
                                var file_id=data[i].file_id;
                                var file_name=data[i].file_name;
                                var relative_path=data[i].relative_path;
                                console.log(relative_path);
                                var id=data[i].id;

                                var image1="<img src='"+relative_path+"'/>";
                                    image1+="<span>"+file_name+"</span>";
                                var file_a="<a class='a1'>删除</a>";

                                var $file_a=$(file_a);
                                $file_a.data("file_id",file_id);
                                console.log($file_a.data("file_id"));//第一次打印

                                var image_a=image1+file_a;
                                var $image_a=$(image_a);
                                //显示图片
                                $("#upload_img").append($image_a);

                            }
                        },
                        error:function(){
                            alert("fjlasjf");
                        }

                    });
                });

                $("#upload_img").on("click",".a1",function(){
                    var file_id=$(this).data("file_id");//第二次打印
                    console.log(file_id);
                });



                <div id="upload_img"></div>

为什么第一次可以打印出,file_id值,第二次就不可以了呢,经常遇到这种使用data(),绑定数据异常,求解

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • showbo GoCityPass新加坡曼谷通票 2017-09-06 14:16

    看花眼,因为你添加到upload_img中的a1不是你设置设置了data的那个$file_a,你添加的是新的对象$image_a,就没有data缓存数据

    图片说明
    改成下面的

    
       /*
        var $file_a=$(file_a);
        $file_a.data("file_id",file_id);
        console.log($file_a.data("file_id"));
        //这些代码不要了,都没关系
        */
    
        var image_a=image1+file_a;
        var $image_a = $(image_a);
        $image_a.find('a').data("file_id", file_id);//////////////////缓存
        //显示图片
        $("#upload_img").append($image_a);
    
    点赞 2 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 2017-09-06 13:40

    .a1是什么?ajaxfileupload要上传的file对象file1?

    如果是,由于ajaxfileupload是将原来的对象添加到隐藏表单提交,然后新建一个file对象放到原来的位置,所以你第二次提交时click获取的是新的file没有data缓存的数据的,将file_id作为全局变量,通过变量获取,而不是重新

    点赞 评论 复制链接分享
  • sunny_desmond carrykingdow 2017-09-06 13:49

    第二次获取的时候var file_id=$(this).data("file_id");//第二次打印var file_id=$(this).attr("file_id");//第二次打印试试呢~

    点赞 评论 复制链接分享
  • GMingZhou 唯重 2017-09-06 13:59

    参考这个 springmvc图片上传、jquery 图片上传预览 ,如有疑问评论区留言

    点赞 评论 复制链接分享
  • code68 dsad sad ad 2017-09-07 00:50

    $(this).attr("file_id"); 是可以的

    点赞 评论 复制链接分享

相关推荐