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