jquery 관련 질문입니다.
관련링크
http://ljm.kr/Test1.php
119회 연결
본문
위 주소에서 보시면
1. 두개의 질문입력중 아무거나 클릭 => 파란색 테두리로 바뀜
2. 왼쪽의 선택형을 클릭 => 파란색 테두리 밑에 새로운 네모박스 생김
헌데 문제는 새로 생기 박스를 클릭하면 파란색으로 변경이 되지 않습니다.
페이지 로딩시의 네모박스는 클릭이 가능한데 새롭게 생기 네모박스는 선택이 안됩니다.
html 과 jquery 를 사용해서 하려고 하는데 위 문제가 발생합니다.
고수님의 조언 부탁드립니다.
아래소스는 css를 제외한 소스 입니다.
<div style="display:none;">
<div id="TypeList_Choice">
<div class="SurveyTpye Type_Choice">
<div class="Type_Choice_Question">질문입력</div>
<div class="Type_AnswerList">
추가된 DIV
</div>
</div>
</div>
</div>
<div id="Contents">
<div id="Survey_Wrap">
<div id="Survery_Type_List">
<ul>
<li class="TypeList_Choice"><i class="fa fa-list-ol"></i>선택형</li>
</ul>
</div>
<div id="Survery_List">
<!-- <div class="Start_Message">왼쪽의 도구 상자에서 질문을 클릭하시면 여기에 놓입니다.</div>-->
<div class="SurveyTpye Type_Choice">
<div class="Type_Choice_Question">질문입력</div>
</div>
<div class="SurveyTpye Type_Comment">
<div class="Type_Comment_Question">질문입력</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#Survery_List > div").click(function() {
$("#Survery_List > div").removeClass("Type_Selected");
$(this).addClass("Type_Selected");
return true;
});
$(".TypeList_Choice").click(function() {
var TypeList_Choice_Cont = $( "#TypeList_Choice").clone().html();
// $( "#Survery_List" ).append( TypeList_Choice_Cont );
$( ".Type_Selected" ).after( TypeList_Choice_Cont );
return true;
});
});
</script>
답변 1
안돼면 알려주세요. 같은환경이 아니라 테스트를 못하네요.
<div style="display:none;">
<div id="TypeList_Choice">
<div class="SurveyTpye Type_Choice">
<div class="Type_Choice_Question">질문입력</div>
<div class="Type_AnswerList">
추가된 DIV
</div>
</div>
</div>
</div>
<div id="Contents">
<div id="Survey_Wrap">
<div id="Survery_Type_List">
<ul>
<li class="TypeList_Choice"><i class="fa fa-list-ol"></i>선택형</li>
</ul>
</div>
<div id="Survery_List">
<!-- <div class="Start_Message">왼쪽의 도구 상자에서 질문을 클릭하시면 여기에 놓입니다.</div>-->
<div class="SurveyTpye Type_Choice">
<div class="Type_Choice_Question">질문입력</div>
</div>
<div class="SurveyTpye Type_Comment">
<div class="Type_Comment_Question">질문입력</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$(".TypeList_Choice").click(function() {
var TypeList_Choice_Cont = $( "#TypeList_Choice").clone().html();
//$( "#Survery_List" ).append( TypeList_Choice_Cont );
$( ".Type_Selected" ).after( TypeList_Choice_Cont );
return true;
});
});
$(document).on("click","#Survery_List > div",function() {
$("#Survery_List > div").removeClass("Type_Selected");
$(this).addClass("Type_Selected");
return true;
});
</script>
감사합니다.
$(document).on("click","#Survery_List > div",function() {
와
$("#Survery_List > div").click(function() {
가 다르군요... 공부해봐야겠습니다. ^^
답변을 작성하시기 전에 로그인 해주세요.
