当通过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/

---

如果你正在使用jQuery 1.4.1+你可以住绑定模糊和重点，这意味着比赛将被绑定到该事件（一个或多个）

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

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