728x90
1. 동적 바인딩
- html 실행 순서에 따라 dom 객체도 생성되기 때문에 이벤트 실행 완료 이후에 생성되는 html에는 이벤트를 걸 수 없다. 이에 따라 동적으로 이벤트를 걸거나 객체 생성시에 이벤트를 걸어야 한다.
$(document).on('click','.add',function(){
var clone = $(this).parent().clone();
$('body').append(clone);
});
$(document).on('click','.del',function(){
$(this).parent().remove();
});
2. 트리거
이미 걸린 이벤트를 스크립트 상에서 작동되게 하는 방법(사용자가 이벤트 발동한 것처럼 작동 시킬 수 있다.)
$('선택자').trigger('이벤트명');
$('선택자').이벤트메서드();
3. 이벤트 제거
선택된 객체에 걸린 이벤트를 제거한다.
$('선택자').off('이벤트 명');
ex) on 예제
$('선택자').on('click',function(){
});
실습] 객체 조작 메서드 & 동적 바인딩
file-add 클릭시 파일을 더 추가할 수 있는 폼을 추가하고 .file-del 클릭시 파일을 첨부할 수 있는 폼을 제거 하여라. 파일 추가 최대 갯수는 5개이고 최소 1개는 존재해야한다.
<script type="text/javascript">
var count = 0;
$(document).on('click','.file-add',function(){
if(count >3) return;
var clone = $(this).parent().clone();
$('body').append(clone);
count ++;
console.log(count);
});
$(document).on('click','.file-del',function(){
if(count<1) return;
$(this).parent().remove();
count --;
console.log(count);
});
</script>
</head>
<body>
<div id="file-wrap">
<div class="file-group">
<input type="file">
<button type="button" class="file-add">파일추가</button>
<button type="button" class="file-del">파일제거</button>
</div>
</div>
</body>
var count = 0;
$(document).on('click','.file-add',function(){
var len = $('.file-group').length;
if(len < 5){
var clone = $(this).parent().clone();
clone.find('input').val('');
$('file-wrap').append(clone);
}else{
alert('최대 첨부 갯수 5개 입니다.');
}
});
$(document).on('click','.file-del',function(){
var len = $('.file-group').length;
if(len>1){
$(this).parent().remove();
}else{
alert('최소 1개 이상 첨부해야합니다.');
}
});반응형
'[YERIEL] 개발일기 > .etc' 카테고리의 다른 글
| jQuery - Html Ajax (0) | 2020.03.31 |
|---|---|
| 객체 편집 메서드 실습 (0) | 2020.03.31 |
| 수치 조작 메서드 & 객체 편집 메서드 (0) | 2020.03.30 |
| 속성 조작 메서드 (0) | 2020.03.30 |
| jquery 시작하기 (0) | 2020.03.24 |
댓글