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

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

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

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

본문

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> 
주소복사
채택됨
답변의 댓글
museplay님의 댓글
친절한 답변 감사합니다^^
$(선택자).on('click','li',function(){
    //실행내용
})로 계속 했네요...
앞에 document는 그냥 예시인줄 알고 저렇게 썼다가...
덕분에 실행 잘 됩니다^^
오늘도 좋은 하루 보내세요~

SLOOP님의 답변

참조해보세요

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(){

         //실행내용

    });

 

 

 

주소복사
답변의 댓글
museplay님의 댓글
답변해주셔서 감사합니다^^
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에서는 실행이 안되네요ㅠ
답변을 작성하시기 전에 로그인 해주세요.
전체 77,659 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 스타벅스 e-Gift Card (100,000원)

    참여85 회 시작19.08.16 09:15 종료19.08.23 21:15
  2. 댓글 이미지 첨부 게시판

    참여28 회 시작19.08.14 23:33 종료19.08.21 23:33

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT