Question

我正在通过jQuery创建一个带焦点和模糊事件的输入元素。出于某种原因，即使显示输入元素，事件也不会触发。以下是http://jsfiddle.net/9JtLq/8/

的示例

这适用于IE7＆amp; 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/

通过jQuery动态添加html元素时，事件不会触发（在非IE浏览器中）

1 个答案: