안녕하세요 추가된 요소에 대해서 질문있습니다.

안녕하세요 추가된 요소에 대해서 질문있습니다.

QA

안녕하세요 추가된 요소에 대해서 질문있습니다.

본문

HTML


<td id="wrapper">
    <ul>
        <li>
            <input type="text">
        </li>
    </ul>
    <button type="button" id="add_button">추가하기</button>
</td>

 

JAVASCRIPT


var add_li = ${'#wrapper ul'}.html();
$('#add_button').click(function(){
    $('#wrapper ul').last().append(add_li);
});

 

안녕하세요.

이렇게 추가된 새로운 li에서는 기존에 있던 javascript 나 AJAX가 적용이 안되는데...

추가된 li에서도 적용할 수 있게 하려면 어떻게 해야 하나요...?

이 질문에 댓글 쓰기 :

답변 3

동적으로 추가된 노드는 

 

    $(document).on("click","선택자",function(){

         //실행내용

    });

 

로 <script> 루트에 위치해야 합니다.

 

그리고 

 $('#wrapper ul').last().append(add_li); 에서 굳이 last()는 안쓰셔도 됩니다. ul은 하나이고

append가 끼워 넣어라는 뜻이기 때문입니다. ul이 여러개이면 last()를 써서 제일 마지막 ul에 끼워넣는것이구요.

$('#wrapper ul').append(add_li); 바꿨습니다.

 

    $(this).closest('li').html('');
    $(this).closest('li').hide();

은 단순히 html 내용을 비우는 거고 안보이게 하는 것이기 때문에 쓰래기가 됩니다.

그래서 노드 자체를 지워 주시면 됩니다.

 

$(this).closest('li').remove(); 바꿨습니다.

 

님이 작성하신 

$('#add_button').on('click','li',function(){

은 문법자체가 틀렸습니다. 제 답변을 잘못 이해 하신거 같네요.

파란게 잘못 된겁니다.

 

$('#add_button').on('click',function(){

});

$('#add_button').click(function(){

});

은 같은 문법이며 동적으로 추가된 노드에는 이벤트가 적용되지 않습니다. 어차피

add_button은 동적 추가 노드가 아니므로 상관 없고 

 

delete_btn 가 동적 추가 노드 이므로

 

 

    $(document).on("click",".delete_btn",function(){

         //실행내용

    });

 

이렇게 써야 한다는 뜻입니다.

여튼 다음 코드 그대로 적용하시면 될 듯 합니다.

 


<table>
     <td id="wrapper">
        <ul>
            <li>
                <input type="text">
            </li>
        </ul>
        <button type="button" id="add_button">추가하기</button>
    </td> 
</table>
 
 
<script>
    $(function(){
        var add_li = $('#wrapper ul').html();
        $('#add_button').click(function(){
            $('#wrapper ul').append(add_li);
            $('#wrapper ul li').last().append('<button type="button" class="delete_btn">삭제</button>');
        });
    });
    
    $(document).on("click",".delete_btn",function(){
        $(this).closest('li').remove();
    });
</script> 

친절한 답변 감사합니다^^
$(선택자).on('click','li',function(){
    //실행내용
})로 계속 했네요...
앞에 document는 그냥 예시인줄 알고 저렇게 썼다가...
덕분에 실행 잘 됩니다^^
오늘도 좋은 하루 보내세요~

참조해보세요

http://api.jquery.com/on/

 

이런식으로 가능합니다.

$( "#dataTable tbody tr" ).on( "click", function() {

console.log( $( this ).text() );

});

 

$( "#dataTable tbody" ).on( "click", "tr", function() {

console.log( $( this ).text() );

});

추가된 

        <li>
            <input type="text">
        </li>

에 이벤트가 있다는 것인가요??? 즉 li나 input에????

머가됐든 만약 한번 버튼클릭으로 li가 추가되면

 

<td id="wrapper">
    <ul>
        <li>
            <input type="text">
        </li>
        <li>             
            <input type="text">         
        </li>
    </ul>
    <button type="button" id="add_button">추가하기</button>
</td>

위 처럼 빨간색이 노드가 동적으로 추가 되겠죠

 

이처럼 동적으로 추가된 노드를 포함 모든 li에 이벤트를 걸고 싶으시면 다음과 같이 하시면 됩니다.

 

    $(document).on("click","li",function(){

         //실행내용

    });

 

 

 

답변해주셔서 감사합니다^^


var add_li = ${'#wrapper ul'}.html();
$('#add_button').on('click','li',function(){
    $('#wrapper ul').last().append(add_li);
    $('#wrapper ul li').last().append('<button type="button" class="delete_btn">삭제</button>');
});
$('.delete_btn').click(function(){
    $(this).closest('li').html('');
    $(this).closest('li').hide();
});


말씀해주신대로 on으로 바꾸고 중간에 'li'를 추가했는데 이제는 아예 li추가가 되지 않습니다ㅠ

그리고 js로 추가한 삭제버튼을 혹시 작동이 안되나 해서 html에 직접 추가해 봤습니다.
그래서 삭제 버튼을 눌러봤는데 두번째 이벤트가 잘 실행이 됐습니다.
근데 js로 추가한 li에서는 실행이 안되네요ㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 2,338
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT