jQuery delegate() - span태그 추가/삭제하기
delegate
- $(document).delegate(선택자, 이벤트명, 핸들러 );
- 1.7 버전 에서는 모든 이벤트 등록 메소드를 통합하는 메소드가 새로 도입 :
on(이벤트명, [선택자], 핸들러) off( 이벤트명, [선택자], 핸들러)
- 선택자 가 있으면 delegate와 같고 없으면 bind와 같다
ex) --> 다 같은 의미이다.
$('div').delegate('.btn', 'click', function(){})
$('div').on('click', '.btn', function(){})
$(document).on('click', '.btn', function(){})
$(function(){
count=0;
$('div').on('click', '.add', function(){ --> 추가버튼 클릭 시 객체 추가
count++;
file="";
file += '<span id="' + count + '">' --> span 태그 생성
file += ' 파일 : <input type="file">';
file += '<button class="add" type="button">추가</button>'; --> span태그 안에 추가버튼 만들기
file += '<button class="delete ' + count + '"type="button"">삭제</button><br>'; --> span태그 안에 삭제버튼 만들기
filr += '</sapn>'; --> span 태그 받기
$('div').append(file);
})
$('div').on('click', '.delete', function(){ --> 삭제버튼 클릭 시 해당 객체 삭제
vclass = $(this).attr('class'); --> 해당 클래스 불러오기
vc = vclass.split(" ");
$('#' + vc[1]).remove(); --> 삭제버튼 클릭 시 해당 객체 삭제됨
})
})