События не запускаются (в браузерах не IE) при динамическом добавлении html-элементов через jQuery

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/