焦点事件不适用于动态内容

Question

我正在使用jQuery动态添加输入.之后我尝试使用焦点事件来生成另一个输入组.这是jsfiddle(http://jsfiddle.net/sk8UG/),下面是代码片段

HTML:

    <div class='row' id='addChild'>
    <input type='name' name='child0' id='child0'>
    <input type='name' name='phone0' id='phone0'>
    </div>

JS:

  $(document).ready(function(){
     $("#child0").focus(function() {
         $('#addChild').append("<input type='name' name='child1' id='child1'><input type='name' name='phone1' id='phone1'>");
     });
     $("#child1").focus(function() {
         $('#addChild').append("<input type='name' name='child2' id='child2'><input type='name' name='phone2' id='phone2'>");
     });
   });

在#child0的焦点上,它将创建#child1.但是,在#child1的焦点上,它什么也没做

Answer 1

使用事件委托

$('#addChild').on("focus","#child1",function() {

 // do your work here 
});

注意:您必须在运行时在元素上使用事件委派,因为在文档就绪期间这些元素不可用

文件说

事件委托允许我们将单个事件侦听器附加到父元素,该元素将为匹配选择器的所有后代触发,无论这些后代现在是存在还是将来添加.