Focus event not working on dynamic content

Question

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.net/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

score 8 · Accepted Answer · edited Jul 22 '14 at 20:54

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.

edited Jul 22 '14 at 20:54

JakeParis

11,056
3
42
65

answered Jul 18 '14 at 11:19

Balachandran

9,567
1
16
26

Could you please explain event deledation and why the former method doesn't work here – gzix Jul 18 '14 at 11:21
1

it doesnt work gzix because after the object is created you need to add to it an onFocus, but you dont do that, with delegation it's like jQuery.live() deprecated function, read a bit about .live() – Jacek Pietal Jul 18 '14 at 11:23
1

@gzix Your code was not working because you was binding event before event is created. – Manwal Jul 18 '14 at 11:24
Do you know if there is a way to delegate using pure JavaScript? – Coded Container Jan 05 '17 at 21:01

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

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

edited May 23 '17 at 11:51

Community

1
1

answered Jul 18 '14 at 11:20

Manwal

23,450
12
63
93

score 1 · Answer 3 · answered Jul 18 '14 at 11:27

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

score 0 · Answer 4 · answered Jul 18 '14 at 11:26

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

score 0 · Answer 5 · answered Jul 18 '14 at 12:19

0

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

  // do your work here 
});

answered Jul 18 '14 at 12:19

Abhay Yadav

25
10

Focus event not working on dynamic content

5 Answers5

Working Demo