안녕하세요 추가된 요소에 대해서 질문있습니다.
본문
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>
참조해보세요
이런식으로 가능합니다.
$( "#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(){
//실행내용
});