javascript - jquery not working in .appended content -

i have div, has content populated on load (a bunch of 'span' tags delete link in each. clicking delete button remove span. can add new 'span' tags using separate button (each own delete button). loaded span delete buttons work fine, newly added ones not delete.

<div class="instances">  <span class="item">instance 1 <a href="#" class="del">delete</a></span> <span class="item">instance 2 <a href="#" class="del">delete</a></span> </div> <span class="addinstance">add instance</span>   $('.addinstance').click(function () { $('.instances').append('<span class="item">more <a href="#" class="del">delete</a></span> '); });  $('.instances .del').click(function (event) { event.preventdefault(); $(this).parent('.item').hide(); }); 

check out fiddle made working version of this: http://jsfiddle.net/ac7x6/3/

in fiddle:

1. click delete button on instance 1 - works fine.

2. click 'add instance' button - adds new entry.

3. click 'delete' button on newly added instance - not delete.

i have read lot issue, including jquery .on(). not sure how implement them.

help! :)

use event delegation dynamically generated items, if wanna remove item use remove()

$('.instances').on('click','.del',function (event) {     event.preventdefault();     $(this).parent('.item').remove(); }); 

fiddle demo