Late binding in jquery? -

there table has 1 row:

<table> <tr><td><span class="removeitem"></span></td></tr> </table>

i utilize bind function class:

$('.removeitem').bind('click', function() { $(this).parent().remove(); homecoming false; });

later, add together rows same class name (.removeitem) table:

var newrow = '<tr><td><span class="removeitem"></span></td></tr>'; $(table).append(newrow);

when click on first row item, removed. dynamically added 1 not.

why this?

use event delegation placing handler on table delegate()[docs] method:

$('table').delegate('.removeitem','click', function() { $(this).closest('tr').remove(); homecoming false; });

...you'll want place id on table in order narrow selection.

now click events bubble table invoke handler if item clicked matches ".removeitem" selector.

i changed utilize closest()[docs] method nearest <tr> ancestor.

working example: http://jsfiddle.net/uxbcn/

this preferred on .live() because needs run selector clicks within table instead of clicks in entire document.

jquery

JC