Question

I have a table where i can add rows using clone function like this:

new_row = $(table_id+' tbody > tr:last').clone(true).removeAttr('id').insertAfter(table_id+' tbody > tr:last');

each row have special cell which content creates manualy like this:

$(new_row).children('.action_2').html('<a class="row_delete"><img src="/images/pack/cross.png" alt="Cancel" /> Cancel</a>');

The problem is that function $('.row_delete').click(function(){...}) is not working with this dynamically added rows, what’s wrong?

Answer 1

You need to use the .live function ( .live(‘click’, function(e){/stuff/}); ) (and to remove the handler, use .die() )

Reason for this is that bind, adds a click handler to every element specified (with the .row_delete class in your example), and the elements that are added later, are unnafected.

Live(), binds the handler much higher, and then checks if the registered click happened in one of the specified elements.

Keep in mind that if there is another specified handler on the element, that prevents propagation of the event (or bubbling in IE language) then live()’s callback won’t be called.