Working Demo

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

使用活动delegation

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

 // do your work here 
});

注意：您必须对在运行时创建的元素使用事件委派，因为在文档准备就绪期间这些元素不可用

文件说

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

Answer 2

试试这段代码：

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

Working Demo

在未创建元素之前绑定事件而不在DOM中预先发布。事件委派是动态内容的jquery事件的方法。

<强> Detilas

Answer 3

正如您所说的解释delecation 事件委托允许我们将单个事件监听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代是现在存在还是被添加到未来。

下面的代码可以正常使用

    $('#addChild').on("focus","#child1",function() {
    $(this).append("<input type='name' name='child2' id='child2'><input type='name' name='phone2' id='phone2'>");
     });

Answer 4

绑定on focus事件时，尚未创建标识为child1的元素。事件侦听器只能绑定在现有元素上。正如Bala所解释的那样，事件授权是可行的方式。

作为替代方案，您可以在创建新元素后绑定新事件

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

Answer 5

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

  // do your work here 
});

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

5 个答案:

Working Demo