2012-01-23 16 views
3

.on() api of jQueryの機能を誤解している可能性があります。API上の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要素を作成するときに要素が作成された後、イベントが自動接続されていない:ここで私はアウトしようとしているコードがあります。私は.bind() apiでこれを達成することができます。私は新しいボタンを作成した後にそれを起動するだけですが、私の友人の一人は.on()イベントがこれを自動的に実行していると私に示唆しました。

私は.on() apiの機能を誤解しましたか?

+0

あなたは.live使用してこれを達成することができます() - 私は.on()は唯一以下の私の答えを見て@MonkeyCoderすでに既存の要素 – MonkeyCoder

+1

で使用することができると思います。 .on()は、バインド、ライブ、デリゲートのすべてのバリアントを処理します。 –

+0

@MonkeyCoder liveは非推奨です。 – tugberk

答えて

4

.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'); 
+0

ニース!今私は期待どおりに動作します:http://jsfiddle.net/tugberk/Um9VE/5/ありがとう! – tugberk

+0

素晴らしい!あなたが実際の回答としてマークした場合、私はそれを感謝します;) –

+0

私は、それは私を許可しません:)特定の時間が通過する必要があります:) – tugberk

関連する問題