출처 :&nbsp;<a href="http://www.mimul.com/pebble/default/2013/03/06/1362559765579.html" target="_blank">http://www.mimul.com/pebble/default/2013/03/06/1362559765579.html</a> 
<div style="margin-left: 4em;"> 
 
 
</div><div class="contentItemBody" style="line-height: 1.5; padding: 8px 30px; color: rgb(0, 0, 0); font-family: 'Trebuchet MS', 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;">
jQuery 1.7에서 .bind(), .live(), .delegate()가 .on()으로 통합되었다길래 좀 살펴보았다. 
 <h3 style="font-size: 1em; font-weight: normal; padding: 0px; color: rgb(25, 42, 63); margin: 0px 0px 0.5em; line-height: 19px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgb(25, 42, 63); clear: left;">개요</h3>.bind(), .live(), .delegate(), .on()은 이벤트에 관련된 기능으로, 먼저 각각의 기능들을 살펴보는 것이 순서인것 같아 먼저 기능들을 살펴본다. 
 .bind()는 가장 많이 쓰는 이벤트 설정 함수이다. DOM이 로드된 후 추가된 element들에 대해서 event handler를 처리할 수 없고, .live(), .delegate()는 나중에 추가된 element들의 이벤트들을 처리할 수 있다. 
 foo에 이벤트를 설정하고 싶다면 아래와 같이 사용된다. 
<pre style="background-color: rgb(238, 238, 238); padding: 6px; color: rgb(47, 190, 53); line-height: 1.3em;">$(".foo").bind("click", handler);
$(".foo").on("click", handler);
</pre> 
.delegate()는 이벤트 설정을 부모에 대해 한다. 이런 방식을 이벤트 대리자라고 명명한다. 
 .foo에 이벤트를 설정하면 다음과 같이 사용된다. 
<pre style="background-color: rgb(238, 238, 238); padding: 6px; color: rgb(47, 190, 53); line-height: 1.3em;">$("#container").delegate(".foo", "click", handler);
$("#container").on("click", ".foo", handler);
</pre> 
.live()는 이벤트의 설정 대상이 document가 된다. 
 foo에 이벤트를 설정하고 싶다면 아래와 같이 사용된다. 
<pre style="background-color: rgb(238, 238, 238); padding: 6px; color: rgb(47, 190, 53); line-height: 1.3em;">$(".foo").live("click", handler);
$(document).on("click", ".foo", handler);
</pre> 
<h3 style="font-size: 1em; font-weight: normal; padding: 0px; color: rgb(25, 42, 63); margin: 0px 0px 0.5em; line-height: 19px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgb(25, 42, 63); clear: left;">.on()을 사용해야 하는 이유</h3>1. .on()으로 통합 될 예정 
 .live()와 .die()는 jQuery 1.9에서 빠졌고(1.7 Deprecations), .delegate()도 향후 없어질 예정이어서 .on을 사용하는 습관을 가지자. 
 2. .on()으로 여러 종류의 이벤트 설정이 가능 
 - 첫번째 인자에 공백로 구분자로 해 여러 이벤트에 대응이 가능하다. 
<pre style="background-color: rgb(238, 238, 238); padding: 6px; color: rgb(47, 190, 53); line-height: 1.3em;">$(".foo").on("change blur", handler);
</pre> 
- 각 이벤트에 여러 처리자를 둘 수 있다. 
. 하나의 elements에 여러 이벤트 설정 
<pre style="background-color: rgb(238, 238, 238); padding: 6px; color: rgb(47, 190, 53); line-height: 1.3em;">$(".foo").on({ 
 "change" : function(){...},
 "blur" : function(){...} 
});
</pre> 
. 이벤트 대리자에서의 여러 이벤트 설정 
<pre style="background-color: rgb(238, 238, 238); padding: 6px; color: rgb(47, 190, 53); line-height: 1.3em;">$("#container") on ( { 
 "change" : function(){...},
 "blur" : function(){...} 
}, ".foo");</pre></div>

Jquery 동적으로 추가된 html에 이벤트 핸들러 넣기 .bind(), .live(), .delegate(), .on()