객체 조작 메서드 활용 - 동적 바인딩

  동적 바인딩

html 실행 순서에 따라 dom 객체도 생성되기 때문에 이벤트 실행 완료 이후에 생성되는 html에는 이벤트를 걸 수가 없다. 이에 따라 동적으로 이벤트를 걸거나 객체 생성시에 이벤트를 걸어야 한다.

 

버튼 생성 or 제거

<div>
	<button type="button" class="add">생성</button>
	<button type="button" class="del">제거</button>
</div>

다음 과 같은 결과 도출>>

 

 

 

방법1.

$(document).on('click','.add',function(){
	var clone = $(this).parent().clone();
	$('body').append(clone);
 });
$(document).on('click','.del',function(){
	$('body').parent().remove();
}); 

 

방법2.

$('.add').click(function(){		
	var clone = $(this).parent().clone();
	clone.find('.add').click(function(){
		var clone = $(this).parent().clone();
		$('body').append(clone);
	});
	clone.find('.del').click(function(){
		$(this).parent().remove();
	});
	$('body').append(clone);
});

 

---

 

  이벤트 등록

▶ 트리거

이미 걸린 이벤트를 스크립트 상에서 작동되게 하는 방법. (사용자가 이벤트 발동한것처럼 작동 시킬 수 있다.)

- $('선택자').trigger('이벤트명');

- $('선택자').이벤트메서드();

 

☞ 사용방법

$('.add').trigger('click')

$('.add').click()

$('.add').eq(0).trigger('click')

$('.add').eq(0).click()

 

▶ 이벤트 제거 메서드

선택된 객체에 걸린 이벤트를 제거한다.

$('선택자').off('이벤트명');

 

(이벤트를 거는 메서드 on)

$('선택자').on('click',function(){});

 

 

---

  동적 바인딩 실습

<script>
	var choice2List = {
		'9' : ['9급 홍길동', '9급 고길동'],
		'7' : ['7급 이순신', '7급 유관순']
	}
	var choice3List = {
		'9급 홍길동' : ['국어', '영어'],
		'9급 고길동' : ['국사', '토익'],
		'7급 이순신' : ['과학', '국사'],
		'7급 유관순' : ['수학', '일어']
	}
	$(function(){
		$('.choice1').click(function(){
			var val = $(this).val();
			var array = choice2List[val];
			var html='';
			for(var i=0;i<array.length;i++){
				html+='<label><input type="checkbox" class="choice2" value="'+array[i]+'">'+array[i]+'</label>';
			}
			$('#choice2Wrap').html(html);
		});
	});
	$(document).on('click','.choice2',function(){
		var html='';
		$('.choice2:checked').each(function(){
			var choice = $(this).val();
			var array = choice3List[choice];
			for(var i=0;i<array.length;i++){
				html+='<label><input type="checkbox" class="choice3" value="'+array[i]+'">'+array[i]+'</label>';
			}
		});
		$('#choice3Wrap').html(html);
	}); 
</script>
<div>
	<h1>급수 선택</h1>
	<label><input type="radio" name="choice1" class="choice1" value="9"> 9급</label>
	<label><input type="radio" name="choice1" class="choice1" value="7"> 7급</label>
</div>
<div>
	<h1>교수 선택</h1>
	<div id="choice2Wrap"></div>	
</div>
<div>
	<h1>과목 선택</h1>
	<div id="choice3Wrap"></div>
</div>

 

 

실습 결과

급수 선택

9급 7급

교수 선택

 

과목 선택