(jQuery) 동적바인딩

동적 바인딩

- 새로 추가된 html 요소에 이벤트가 반응 할 수 있도록 만드는 방법

 

<ul id="ul01">
	<li>
		<button type="button" class="add">추가</button>
		<button type="button" class="del">제거</button>
	</li>
</ul>

<script type="text/javascript">
	var $ul01,
	liHtml = '';
	liHtml += '<li>';
	liHtml += '<button type="button" class="add">추가</button> ';
	liHtml += '<button type="button" class="del">제거</button> ';
	liHtml += '</li>';
	$(function(){ //문서가 완료 됐을때 실행되는 영역
		$ul01 = $('#ul01');
	});
	
	//동적 바인딩 -> 인수 3개(이벤트 명, 선택자, 함수) 
	$(document).on('click', '.add', function() { //화면에 문서가 로드가 되었을때 사용자가 클릭하면
		console.log('클릭');
		$ul01.append(liHtml);			
	});
	
	$(document).on('click', '.del', function() { 
		$(this).parent().remove();			
	});
</script>

 

 

실습1

아래의 추가 버튼 클릭시 행을 복제 하여 행추가, 제거 버튼 클릭시 행 제거를 하도록 하시오.

(input의 값은 초기화, 삭제는 행 2개 이상일 경우에만 삭제 가능하도록)

<style type="text/css">
	.bg01{background-color: #f00;}
	.bg02{background-color: #0f0;}
	.bg03{background-color: #00f;}
</style>

<button type="button" id="btn01">배경색상전환</button>

 

풀이

var bg = $('style').text();
	$(function() {
		for(var i=0; i<bg.length; i++){
			$('#btn01').click(function() {
				console.log(bg)
				$('body').css('background-color', bg);
			});
		}
	});

1. addClass를 생각못하고 CSS() 메서드만 생각해서 style태그를 어떻게 불러와야하나 계속 고민함 > style '태그'니깐 똑같이 선택자로 불러오면 됨
2. text() 메서드로 style태그안 모든 문자 다 콘솔에 찍어놓고 어떻게 뒤에 '#f00','#0f0','#00f'를 배열에 넣을까 고민함 > html로 찍어봤는데 undefined 나옴 해결 못함
3. 굳이 조건문 안 쓰고 전역변수 선언해 놓고 함수 안에 조건문 줬으면 됐다... 

 

정답

$(function() {
	var $body = $('body'),
	classArray = ['bg01', 'bg02', 'bg03'],
	cnt=0;
	$('#btn01').click(function() {
		$body.removeClass(classArray).addClass(classArray[cnt]); //배열 이용
		//$body.removeClass('bg01 bg02 bg03').addClass('bg0' + (cnt+1)); 배열이용안할때
		cnt++;
		if(cnt>=classArray.length)cnt=0;
	});
});

html body에 class=""로 선언 안했는데 style에 선택자로 써둔걸 addClass 한다는 개념이 머리에 안들어왔다... 

 

 

실습2

아래의 추가 버튼 클릭시 행 추가, 제거 버튼 클릭시 행제거, 토글버튼 클릭시 행의 배경색 빨강과 흰색으로 변경되도록 하시오.

<ul id="ul01">
	<li>
		<button type="button" class="add">추가</button>
		<button type="button" class="del">제거</button>
		<button type="button" class="toggle">토글</button>
	</li>
</ul>

 

풀이

var li = document.querySelector('#ul01').innerHTML;

$(document).on('click','.add', function(){
	$('#ul01').append(li);			
});

$(document).on('click','.del', function(){
	$(this).parent().remove();	
});

$(document).on('click','.toggle', function(){
	var s = $(this).parent().css('background-color');

	if(s == '#fff'){
		$(this).parent().css('background-color','#f00');
	}else {
		$(this).parent().css('background-color','#fff');
	}
});

1.  또 class 이용할 생각 못하고 조건문...
2. 실습1 이랑 같은 html 파일이라 style 태그 똑같이 이용할 수 있는데 생각 못함
3. 제이쿼리는 background-color 값 rgb, rgba 형식으로 반환해서 조건문으로 hex 형식 '#f00', '#fff' 넣어봤자 인식못함

 

정답

var li = document.querySelector('#ul01').innerHTML;

$(document).on('click','.add', function(){
	$('#ul01').append(li);			
});

$(document).on('click','.del', function(){
	$(this).parent().remove();	
});

$(document).on('click','.toggle', function(){
	$(this).parent().toggleClass('bg01');
});