Les événements ne se déclenchent pas (dans les navigateurs non IE) lors de l'ajout dynamique d'éléments html via jQuery

Question

Je crée un élément d'entrée avec des événements de focus et de flou via jQuery. Pour une raison quelconque, même si l'élément d'entrée est affiché, les événements ne se déclenchent pas. Voici un exemple http://jsfiddle.net/9JtLq/8/

Cela fonctionne dans IE7 & IE8. Cela ne fonctionne pas dans Firefox, Safari ou Chrome. Pourquoi?

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

vous devez lier l'événement après que vous ajoutez

$(".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/

---

Si vous utilisez jQuery 1.4.1+ vous pouvez vivre lier flou et de se concentrer, ce qui signifie tous les éléments actuels et futurs qui correspondent sera lié à l'événement (s)

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

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