jQueryを介してhtml要素を動的に追加すると、（IE以外のブラウザでも）イベントが発生しません。

Question

jQueryを使用してフォーカスおよびブラーイベントを持つ入力要素を作成しています。何らかの理由で入力要素が表示されても、イベントは発生しません。ここに例がありますhttp://jsfiddle.net/9JtLq/8/

これはIE7で動作します& IE8。 Firefox、Safari、Chromeでは動作しません。どうして？

HTML

<div> 
    Try to focus from one input to another. 
</div> 

<div class="placeholder"/> 

<div class="placeholder"/> 

<div id="output" /> 

のjavascript：あなたが追加した後にイベントをバインドする必要があり

var input_box = $("<input type=\"text\" />") 
.focus(function() 
{ 
     $("#output").html($("#output").text() + "focus - "); 
}) 
.blur(function() 
{ 
     $("#output").html($("#output").text() + "blur - "); 
}); 


$(".placeholder").append(input_box); 

Answer 1

$(".placeholder").append("<input type=\"text\" />"); 

$(".placeholder input:text").focus(function() { 
    $("#output").html($("#output").text() + "focus - "); 
}).blur(function() { 
    $("#output").html($("#output").text() + "blur - "); 
}); 

http://jsfiddle.net/9JtLq/9/

---

0123すべてのことで

あなたはイベント（複数可）にバインドされます一致するすべての現在および将来の要素を意味し、バインドブラーとフォーカスを生きることができる1.4.1+のjQueryを使用している場合

$(".placeholder input:text").live("focus", function() { 
    $("#output").html($("#output").text() + "focus - "); 
}).live("blur", function() { 
    $("#output").html($("#output").text() + "blur - "); 
}); 

http://jsfiddle.net/9JtLq/10/