CODEWITHSUNDEEP
jquerydynamicelement
user3029400
user3029400

Reputation: 387

How to use dynamically created elements?

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

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!

Upvotes: 0

Views: 610

Answers (5)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

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

Upvotes: 2

Neel
Neel

Reputation: 11721

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

Upvotes: 0

Think Different
Think Different

Reputation: 2815

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

Upvotes: 0

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

Try this :

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

Upvotes: 0

Sunny Sharma
Sunny Sharma

Reputation: 4934

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

Upvotes: 1

Related Questions