목록으로

jqeury click 함수 실행 순서 채택완료

Brusher

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전 조회 4,802

답변 3

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

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

우선 common.js는 아래와 같고

Copy

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 파일에서 불러오는 부분은 아래와 같습니다

Copy

set_img("165");

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

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

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

Copy

$(".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개

정렬:

채택된 답변

+20 포인트

닥시

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

Brusher

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

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

댓글을 작성하려면 로그인이 필요합니다.

Brusher

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

click 시 remove 부분을 setTimeout 주니까 해결되네요

호출 순서에 문제가 있던게 맞는 것 같습니다.

답변주신분들 다들 감사합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

iBNeer

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

Copy

$(".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 밖으로 옮기고 테스트해보세요

로그인 후 평가할 수 있습니다