jqeury click 함수 실행 순서
본문
안녕하세요 사진을 올리고 삭제하는 부분인데
삭제 할 때 사진이 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");
});
답변 3
vHtml 에 </div> 가 하나 빠진 거 아닌가요?
답변 감사합니다 추가해도 동일하네요,,
$(".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 밖으로 옮기고 테스트해보세요
동일합니다
저것 외 common.js에서 php 파일 하단으로 옮겨 넣어도 동일하더라구요~
음... 현재 상황만으로는 어디가 문제인지 확인하기가 어렵네요 ㅠ
click 시 remove 부분을 setTimeout 주니까 해결되네요
호출 순서에 문제가 있던게 맞는 것 같습니다.
답변주신분들 다들 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
