API上的jQuery不會自動綁定

Question

也許我誤解了.on() api of jQuery的功能。這是我想出來的代碼：

http://jsfiddle.net/tugberk/Um9VE/

<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元素，該事件不會在創建元素後自動連接。我可以很容易地通過在創建新按鈕後觸發它來實現這一點，但我的一個朋友建議我.​​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');