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

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

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

회원로그인

진행중 포인트경매

  1. 디오리진 버전 샤아전용 자쿠1

    참여33 회 시작19.06.13 23:12 종료19.06.16 23:12

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

© SIRSOFT