테스트 사이트 - 개발 중인 베타 버전입니다

jquery 관련 질문입니다. 채택완료

열매 7년 전 조회 1,856

http://ljm.kr/Test1.php

 

위 주소에서 보시면

 

1. 두개의 질문입력중 아무거나 클릭 => 파란색 테두리로 바뀜

2. 왼쪽의 선택형을 클릭 => 파란색 테두리 밑에 새로운 네모박스 생김

 

헌데 문제는 새로 생기 박스를 클릭하면 파란색으로 변경이 되지 않습니다.

페이지 로딩시의 네모박스는 클릭이 가능한데 새롭게 생기 네모박스는 선택이 안됩니다.

 

html 과 jquery 를 사용해서 하려고 하는데 위 문제가 발생합니다.

 

고수님의 조언 부탁드립니다.

 

아래소스는 css를 제외한 소스 입니다.

<div style="display:none;">

<div id="TypeList_Choice"></p>

<p>            <div class="SurveyTpye Type_Choice">

                <div class="Type_Choice_Question">질문입력</div>

                <div class="Type_AnswerList">

추가된 DIV

                </div>

            </div></p>

<p></div>

</div></p>

<p>

<div id="Contents">

    <div id="Survey_Wrap"></p>

<p>        <div id="Survery_Type_List">

            <ul>

                <li class="TypeList_Choice"><i class="fa fa-list-ol"></i>선택형</li>

            </ul>

        </div></p>

<p>        <div id="Survery_List">

<!--            <div class="Start_Message">왼쪽의 도구 상자에서 질문을 클릭하시면 여기에 놓입니다.</div>-->

            <div class="SurveyTpye Type_Choice">

                <div class="Type_Choice_Question">질문입력</div></p>

<p>            </div></p>

<p>

            <div class="SurveyTpye Type_Comment">

                <div class="Type_Comment_Question">질문입력</div></p>

<p>            </div></p>

<p>

        </div></p>

<p>    </div></p>

<p></div></p>

<p><script type="text/javascript">

$(function(){</p>

<p>    $("#Survery_List > div").click(function() { 

        $("#Survery_List > div").removeClass("Type_Selected");

        $(this).addClass("Type_Selected");

    return true; 

    });</p>

<p>    $(".TypeList_Choice").click(function() { 

        var TypeList_Choice_Cont = $( "#TypeList_Choice").clone().html();</p>

<p>//        $( "#Survery_List" ).append( TypeList_Choice_Cont );

        $( ".Type_Selected" ).after( TypeList_Choice_Cont );</p>

<p>    return true; 

    });</p>

<p>});</p>

<p></script></p>

<p>

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

답변 1개

채택된 답변
+20 포인트
7년 전

안돼면 알려주세요. 같은환경이 아니라 테스트를 못하네요.

 

</p>

<p><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></p>

<p><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></p>

<p>            <div class="SurveyTpye Type_Comment">

                <div class="Type_Comment_Question">질문입력</div>

            </div></p>

<p>        </div>

    </div>

</div>

<script>

$(function(){</p>

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

    });

});</p>

<p>$(document).on("click","#Survery_List > div",function() { 

    $("#Survery_List > div").removeClass("Type_Selected");

    $(this).addClass("Type_Selected");

    return true; 

});

</script></p>

<p>

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

답변에 대한 댓글 1개

열매
7년 전
감사합니다.


$(document).on("click","#Survery_List > div",function() {

$("#Survery_List > div").click(function() {
가 다르군요... 공부해봐야겠습니다. ^^

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

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

로그인