jquery 관련 질문입니다.

열매

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

2018-05-03 (목) 16:44:25 1,975

http://ljm.kr/Test1.php

위 주소에서 보시면

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

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

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

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

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

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

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

Copy

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

jquery

답변 1개 / 댓글 1개

채택된 답변

+20 포인트

로우니

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

2018-05-03 (목) 17:06:27

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

Copy

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

답변에 대한 댓글 1개

열매

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

2018-05-03 (목) 23:13:42

감사합니다.

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

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

jquery 관련 질문입니다.

답변 1개 / 댓글 1개

답변에 대한 댓글 1개

공유하기