I am adding input dynamically using jQuery. After that i am trying to use focus event to generate yet another input group. Here is the jsfiddle (/) and the snippet is below

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'>");
     });
   });

On focus of #child0 it will create #child1. But, on focus of #child1, it does nothing

I am adding input dynamically using jQuery. After that i am trying to use focus event to generate yet another input group. Here is the jsfiddle (http://jsfiddle/sk8UG/) and the snippet is below

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'>");
     });
   });

On focus of #child0 it will create #child1. But, on focus of #child1, it does nothing

• javascript
• jquery
• html
• input

Share Improve this question Follow edited Jul 18, 2014 at 11:37 gzix asked Jul 18, 2014 at 11:17 gzixgzix 26933 silver badges2121 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

use event delegation

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

 // do your work here 
});

NOTE: You have to use event delegation on element which are created at run time since those elements are not available during document ready

Document Says

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Try this code:

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

Working Demo

Binding event before element in not created and not presend in DOM. Event Delegation is method for jquery event on dynamic content.

Detilas

As you asked explain delecation Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Below code will work fine

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

When you are binding the on focus event, the element with the id child1 has not been created yet. Event listeners can only be bound on existing elements. As Bala explained, event delegation is the way to go.

As an alternative you could bind the new event after creating a new element

$(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'>");
     });
   });

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

  // do your work here 
});