테이블의 td범위를 누르면 td의 내용이 input text박스로 들어가고 버튼이 하나 나오도록 만들었거든.
그 상태에서 다른 td를 선택되어있던 td의 내용은 원상태로 돌아가게 만들었어.
만약 버튼을 클릭하게되면 바뀐 내용으로 ajax싸바싸바해서 정상처리되면 바뀐내용으로 td의 내용이 바뀌도록 만들었으..
아 그런데...인풋박스를 클릭하면 다시 td의 원내용으로 계속 초기화 되버리는거야. 다른 범위를 눌러도 계속 인풋박스가 원 내용으로 계속 초기화 되길래 td를 none_selected라는 클래스 이름으로 묶고 클릭되면 none_selected는 지워지고 selected로 바뀌도록 만들었거든.
그런데 그 증상이 똑같아 ㅠㅜ selected로 바뀌면 클릭해도 아무런 액션이 없어야할것같은데 액션이 발동되어서 인풋박스가 초기화되버려 ㅠㅜ
이거 왜그런거야?
내가 JQuery는 재대로배운게아니라 주먹구구식으로 휙휙배우면서 넘어가다가 한번 써먹어보려고 하는거라서 코드가 바보같을수도 있으니 이해해 주세요 ㅠㅜ
var origin_name; //원 내용을 저장해 놓기위한 변수
$(".none_selected").click(function() {
//selected 클래스가 있으면 td를 원 내용으로 고치고 클래스를 none_selected로 고친다.
$('.selected').text(origin_name);
$('.selected').addClass('none_selected');
$('.selected').removeClass('selected');
//현재 td의 내용을 origin_name에 대입하고 selected클래스로 고쳐준다.
origin_name = $(this).text();
$(this).addClass('selected');
$(this).removeClass('none_selected');
//현재 td의 내용은 인풋박스와 버튼으로 바꾸고 인풋박스에 원래있던 내용을 집어 넣는다.
$(this).html("<input type='text' value=''><input type='button' value='변경' id='band_editer_button'
style='padding:2px 10px; text-align:center;margin-left:20px;'>").find("input[type='text']").attr('value', origin_name);
//버튼이 클릭되었을시 처리를 해서 변경이 성공하면 바뀐내용으로,
//실패하면 원내용으로 td의 내용을 변환후 클래스를 none_selected로 고친다.
$(function() {
$("#band_editer_button").click(function() {
var new_name = $('.selected').find("input[type='text']").attr('value');
$.post("/ajex_engine/band_editer.php", {new_name: $('.selected').find("input[type='text']").attr('value'),
target_id: $('.selected').parent().find('th').text()},
function(data) {
if(data = 0) {
alert("변경을 실패하였습니다.");
$('.selected').text(origin_name);
} else {
$('.selected').text(new_name);
}
$('.selected').addClass('none_selected');
$('.selected').removeClass('selected');
}
);
});
});
});
일단 \'인풋박스를 클릭하면 다시 td의 원내용으로 계속 초기화 되버리는거야\' 이 부분은 이벤트전파 때문에 그런거 같아요. td에 click이벤트를 걸어 놓으셔서 input박스를 클릭해도 버블링 때문에 td를 또 클릭한것처럼 되버리거든요. 그래서 input박스를 클릭하던 td를 클릭하던 계속 초기화 되는 거에요
해결방법은 여러가지가 있지만 지금 해본건 input과 button을 div로 하나로 묶은 다음 전파를 막도록 return false를 해주는게 가장 쉬운것 같습니다. $(this).html(\"<div id=\'selected\'><input type=\'text\' value=\'\'><input type=\'button\' value=\'변경\' id=\'band_editer_button\'\" + \"style=\'padding:2px 10px; text-align:center;margin-left:20px;\'></div>\") .find(\"input[type=\'text\']\") .attr
(\'value\', origin_name).end().find(\'#selected\').click(function(){return false; });
그 다음 문제는 $(function() { $(\"#band_editer_button\").click(function() 이 부분 입니다. $()함수안에 함수를 넣게되면
$(document).ready(function(){}) 이랑 의미가 같아 지는데요, 찾고자 하는 $(\"#band_editer_button\")는 DOM이 로드된후에 없습니다. 왜냐하면 td를 클릭했을때 input과 button이 생기기 때문입니다. 따라서 input과 button을 생성했을때 체인으로 같이 연결하여 이벤트를 등록해 주시던지 아니면 live라는 이벤트핸들러를 써서 등록할 수 있습니다.
위에소스에 이부분만 추가해 주시면 되겠습니다. .end().find(\'#band_editer_button\').click(function() {/* 핸들러 이벤트 */}); (live는 td의 click이벤트 때문에 막혀서 그런지 안됩니다 지금은...)
그리고 ajax부분은 if문이 조금 이상합니다. 동등비교(==)나 동일비교(===)가 아닌 대입입니다(data = 0) 이럴 경우 if문안에 data는 항상 0이 되므로 else문만 실행이 됩니다.
흐아 이걸 지금봤네용 ㅠㅜ 어케어케 다 잘 해결했습니다. 미리미리 다 만들어두고 클래스에 발동조건걸어서 꺼냈다 숨겼다하는걸로 했어요 ㅠㅜ