그누보드 QA - jqeury click 함수 실행 순서

jqeury click 함수 실행 순서

Brusher 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2021.01.14 12:34:50 조회 4062 (211.♡.♡.87)

본문

안녕하세요 사진을 올리고 삭제하는 부분인데

삭제 할 때 사진이 2장이상이여야만 삭제가 되더라구요

우선 common.js는 아래와 같고


function set_img(vHeight)
{
    var vHtml = "";
    vHtml += "<div class='estimate_photo col-md-4 text-center'>";
    vHtml += "<input type='file' name='photo[]' accept='image/*' style='height: "+vHeight+";' class='estimate_photo_file'/>";
    vHtml += "<div class='estimate_image_click_bg'>";
    vHtml += "<img src='../img/common/estimate_icon_image_info.png'/>";
    vHtml += "<p>사진파일 업로드</p>";
    vHtml += "</div>";
    
    $("#imageList").append(vHtml);
    
    $(".estimate_photo_file").bind('change', function() {
        var fv_file = this.files[0].name;
        var fv_type = fv_file.substring(fv_file.length-3,fv_file.length);
        fv_type = fv_type.toUpperCase();
        if(fv_type=="PEG"||fv_type=="JPG"||fv_type=="PNG"||fv_type=="GIF"||fv_type=="BMP")
        {
            var $el_div = $(this).closest(".estimate_photo");
            loadImage(
                this.files[0],
                function (img) {
                    $el_div.find(".estimate_image_click_bg").remove();
                    var vHtml2 = "";
                    vHtml2 += "<div class='estimate_image_del_bg'><a href='javascript:' class='estimate_photo_file_remove'><i class='xi-close-min'></i>삭제</a></div>";
                    $el_div.append(vHtml2);     
                    $el_div.append(img);     
                }, {orientation:true,maxWidth: 150}
            )
            photo_count++;        
            doInitImage2(vHeight);              
        }else{
            alert("이미지 파일만 업로드 가능합니다.");
        }
    }); 
    $(".estimate_photo_file_remove").on('click', function() {
        console.log("click");
        var close_photo = $(".estimate_photo");
        $(this).closest(close_photo).remove();
        console.log("remove");
    });
}

php 파일에서 불러오는 부분은 아래와 같습니다


set_img("165");

아래 부분이 삭제하는 부분인데

사진을 두장이상 올리고 첫번째 사진에서 삭제버튼을 누를때 삭제가 됩니다.

두장이상올려도 두번째사진의 삭제버튼을 누를 때, 사진을 한장만 올렸을 때 삭제버튼을 누를땐 아예 실행 되지않습니다(아래코드 콘솔도 안찍힙니다.)


$(".estimate_photo_file_remove").on('click', function() {
        console.log("click");
        var close_photo = $(".estimate_photo");
        $(this).closest(close_photo).remove();
        console.log("remove");
    });

#javascript #jquery

답변 3

닥시 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2021-01-15 14:07:22 222.♡.♡.25

vHtml 에 </div> 가 하나 빠진 거 아닌가요?

↳ Brusher 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2021-01-17 20:29:54211.♡.♡.87

답변 감사합니다 추가해도 동일하네요,,

iBNeer 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2021-01-14 12:40:12 112.♡.♡.177



$(".estimate_photo_file").bind('change', function() {
        var fv_file = this.files[0].name;
        var fv_type = fv_file.substring(fv_file.length-3,fv_file.length);
        fv_type = fv_type.toUpperCase();
        if(fv_type=="PEG"||fv_type=="JPG"||fv_type=="PNG"||fv_type=="GIF"||fv_type=="BMP")
        {
            var $el_div = $(this).closest(".estimate_photo");
            loadImage(
                this.files[0],
                function (img) {
                    $el_div.find(".estimate_image_click_bg").remove();
                    var vHtml2 = "";
                    vHtml2 += "<div class='estimate_image_del_bg'><a href='javascript:' class='estimate_photo_file_remove'><i class='xi-close-min'></i>삭제</a></div>";
                    $el_div.append(vHtml2);     
                    $el_div.append(img);     
                }, {orientation:true,maxWidth: 150}
            )
            photo_count++;        
            doInitImage2(vHeight);              
        }else{
            alert("이미지 파일만 업로드 가능합니다.");
        }
    }); 
    $(".estimate_photo_file_remove").on('click', function() {
        console.log("click");
        var close_photo = $(".estimate_photo");
        $(this).closest(close_photo).remove();
        console.log("remove");
    });

이부분을 function 밖으로 옮기고 테스트해보세요