jQuery - delegate

내 취미코딩 실력과 흥미를 한껏 끌어올리는데 큰 공헌을 한 jQuery...

덕분에 온클릭이던 뭐던 제이쿼리로 쉽게 먹이고 쓸 수 있다는건 모두 다 아는 사실...

그러던 중 이미 이벤트 핸들러를 적용한 이후에 생성된 개체들에는 아무 반응이 없어 당황했을 때 delegate 방식을 만나게 되었다.

아래는 예시: (Result 탭을 눌러보자)

추가 설명:

#main 에 li 가 동적으로 버튼을 통해 추가되는 상황에서, 아래와 같이 #main li 에 온클릭을 먹이면 기존에 있던 li 에만 적용된다.

$("#main li").on("click", function() {
	alert(this.innerText);
});

하지만 아래처럼 li 가 아닌 #main 에 온클릭을 먹이되 전달 변수에 "li" 를 명시함으로써 #main 밑에 붙는 li는 동적이던 아니던 모두 해당 함수가 적용될 수 있게 된다. ("li 의 위치가 변경된 것을 보라")

$("#main").on("click", "li", function() {
	alert(this.innerText);
});

#me { visibility : hidden; }