jquery - Delete appended items -

i want add , delete new input fields. default, have 2 fields ready in html , when want delete them through script, works. when added new inputs, doesn't work.

<form action="test.php" method="post" name="days"> <div class="input-row">   <label>     1. item: <input name="item1" />   </label>   <br /> </div> <div class="input-row">   <label>     2. item: <input name="item2" /><span class="delete"> - delete</span>   </label>   <br /> </div> <div class="input-row"> <label>   3. item: <input name="item3" /><span class="delete"> - delete</span> </label> <br /> </div> <p class="add-new-row">+ add new field</p> </form>  <script> jquery(document).ready(function() {   $('p.add-new-row').click(function() {     var n = $('input').length+1;     $('<div class="input-row"><label>'         + n         + '. item: <input name="item'         + n         + '"></input><span class="delete"> - delete</span></label><br /></div>').appendto('form[name="days"]').insertbefore('p.add-new-row');     return false;   });    $('.delete').on("click", function() {     $(this).closest('.input-row').remove();   return false;   }); }); </script> 

all need change this:

$('.delete').on("click", function() {     $(this).closest('.input-row').remove();     return false; }); 

to this:

$(document).on("click", ".delete", function() {     $(this).closest('.input-row').remove();     return false; }); 

jsfiddle: http://jsfiddle.net/epat9/

the dom loaded when start adding new elements, have reference document.