How to use dynamically created elements?

Question

I am a newbie with jquery and I have been looking for an answer to my problem with no success, so here it is:

• I have a form with a list of text fields , everytime the user goes out(blur) of the last item, a new text field appears at the end of the list.

My problem is that: a) a new text field is created when the user goes out of any text field originally created, not only on the last one. b) the new created item is the new "last item", but does not behave according to what it is supposed to do

Here is my code:

<form>
<div id="list">
<ul>
<li><input type="text" name="firstname[]"></li>
<li><input type="text" name="firstname[]"></li>
<li><input type="text" name="firstname[]"></li>
</ul>
</div>
<input type="submit">
</form>

and the jquery file:

   $(function(){
   $('#list :last-child').on('blur', function(){
   html = "<li><input type='text' name='firstname[]'></li>";
   $('#list').append(html);
   });
   });

thanks for your help!

---

UPDATE thank you guys for your answers, it took like 2 minutes...very impressive! So here is the update:

$(function(){
  $(document).on('blur','#list :last-child',function(){
       html = "<li><input type='text' name='firstname[]'></li>";
       $('#list').append(html);
       return false;
   });
});

I added return false to avoid any strange behaviour (multiple appends at same time), but I still have a problem: All the items in the list are creating a new items when i blur them, not only the last item!

Answer 1

use .on()

As your element is added dynamically so it is not present at the time DOM ready or page load.

So you have to use Event Delegation

Syntax

$( elements ).on( events, selector, data, handler );

like this

$(document).on('blur','#list :last-child',function(){
    // code here
});

or

$('parentElementPresesntAtDOMready').on('blur','#list :last-child',function(){
   // code here
});

---

Better use

$('#list').on('blur',':last-child',function(){
    // code here
});

---

Update after OP updated Question

Working Fiddle Demo

$(function () {
    $(document).on('blur', '#list li:last-child', function () { //find last child of li:lastchild
        var html = "<li><input type='text' name='firstname[]'></li>";
        $('#list ul').append(html); //append list item to ul
        return false;
    });
});

Better Attach Event Handler to Parent element

Working Fiddle Demo

$(function () {
    $('#list').on('blur', 'li:last-child', function () {
        var html = "<li><input type='text' name='firstname[]'></li>";
        $('#list ul').append(html);
        return false;
    });
});

Answer 2

use $(document).on(...) and it will bind the events for all dynamic controls added to the page.

$(function(){
  $(document).on('blur','#list :last-child',function(){
       html = "<li><input type='text' name='firstname[]'></li>";
       $('#list').append(html);
   });
});

Answer 3

Try this :

$(function(){
    $(document).on('blur', '#list :last-child',function(){
       html = "<li><input type='text' name='firstname[]'></li>";
       $('#list').append(html);
    });
});

Answer 4

Probably you are looking for this, if not please explain a bit more

$(function(){
    $('#list').on('blur','input:last-child' ,function(){
   html = "<li><input type='text' name='firstname[]'></li>";
   $('#list ul').append(html);
  });
});

Answer 5

all you need is ".on" of jquery whose functionality was known as ".live" before jquery 1.9 so jst go through below code for more details go through this link

https://api.jquery.com/on/

$(function(){
    $(document).on('blur','#list :last-child',function(){
     html = "<li><input type='text' name='firstname[]'></li>";
     $('#list ul').append(html);
   });
});