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" /> 

자바 스크립트 : 당신은 당신이 추가 한 후 이벤트를 바인드해야

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/

---

모든함으로써 이벤트 (들)

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

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