Wire up button click events after AJAX post

Question

I have a HTML table with various rows, each have a delete button with a class.

On the DocumentReady event I wire up all buttons with this class to handle the click event.

On the click event it does a jQuery post which deletes data from the database and returns the table with the removed row.

If I go to click another delete button it doesn't do anything as if the click event is not wired up. I have tried wiring it up in the OnSuccess event as well as DocumentReady but nothing.

Answer 1

I would use the live binding function in jquery to be able to bind to all specified elements at any time of creation:

http://docs.jquery.com/Events/live

Answer 2

Sounds like you are removing the entire table (with the buttons that have events attached to them) and replacing it with a new table (with new buttons that don't have buttons attached).

You have a couple of options.

1. Just remove the row that you delete - don't replace the entire table

2. Use event delegation and put the event handler on the element containing the table

3. Rerun the code that attaches the events every time you rebuild the table

Answer 3

Please do post your jQuery code respononsible for that whole logyc.
Just as a shot in the dark I'd suggest you'll have to use:

$(".button").live("click",function(){...})

instead of

$(".button").click(...)