API에 jQuery가 자동으로 바인딩되지 않습니다

Question

.on() api of jQuery의 기능을 오해했을 수도 있습니다. 요소가 생성 된 후

<a class="btn" href="#">foo</a> 
<a href="#" class="new">New</a> 

<script> 
    $(function(){ 
     $("a.btn").on("click", function(){ 
      alert("foo"); 
     }); 
     $("a.new").click(function(){ 
      $("html").append($("<a/>").attr("class", "btn").attr("href", "#").text("bar")); 
     }); 
    }); 
</script> 

나는 새로운 a.btn 요소를 생성

http://jsfiddle.net/tugberk/Um9VE/이, 이벤트가 자동으로 연결되지 않은 : 여기에 내가 시도하고있는 코드입니다. 나는 새로운 버튼을 만든 후 그것을 트리거하여 쉽게 .bind() api로 이것을 달성 할 수 있지만, 내 친구 중 한 명은 .on() 이벤트가 자동으로이 작업을 수행한다고 제안했습니다.

그래서 .on() api의 기능을 오해 했습니까?

Answer 1

.on()이 .delegate() 또는 .live()처럼 작동하려면 특수 구문이 필요합니다. .on()/.off()을 사용할 수있는 여러 가지 방법과 .bind()/.live() 및 .delegate()과 함께 .undelegate() 및 .die()을 함께 표시하는 방법이 있습니다.

$('a').bind('click', myHandler); 
$('a').on('click', myHandler); 

$('form').bind('submit', { val: 42 }, fn); 
$('form').on('submit', { val: 42 }, fn); 

$(window).unbind('scroll.myPlugin'); 
$(window).off('scroll.myPlugin'); 

$('.comment').delegate('a.add', 'click', addNew); 
$('.comment').on('click', 'a.add', addNew); 

$('.dialog').undelegate('a', 'click.myDlg'); 
$('.dialog').off('click.myDlg', 'a'); 

$('a').live('click', fn); 
$(document).on('click', 'a', fn); 

$('a').die('click'); 
$(document).off('click', 'a');