안녕하세요 추가된 요소에 대해서 질문있습니다.
본문
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는 그냥 예시인줄 알고 저렇게 썼다가...
덕분에 실행 잘 됩니다^^
오늘도 좋은 하루 보내세요~
참조해보세요
이런식으로 가능합니다.
$( "#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에서는 실행이 안되네요ㅠ
