jQuery: .live with AJAX problem

JavaScript
1

I have a table. Each row comes from a MySQL database and contains an anchor with the css class .block
If you click on one of these anchors, it will perform a AJAX $.get and respond with the content relevant to the specific row that was clicked.

This content is another table of database-driven content. In order to allow my user to re-order this content, each row contains a link for ‘Up’ and a link for ‘Down’.
As an example, the ‘Up’ anchors have the class ‘productsimageup’ and when clicked, AJAX $.get is used to interrogate a php file which changes the order. The HTML response is the new table (the order has changed) and the old table is therefore replaced.

Copy code

$(document).ready(function(){
	$('.productsimageup').live("click", function(event) {
		event.preventDefault();
			var url = $(this).attr("href");
			$.get(url, function (resp) {
				$('#productimages').html(resp);
			});
		
	});
});

The problem I’m having is that it only works once. Clicking ‘Up’ immediately moves the row in question up one. However click again and event.preventDefault(); has no effect - it loads the page - the function is no longer bound. I thought ‘live’ would fix this, but no such luck…

Thanks

2

As I replace the table, all of the links get replaced. It seems live() isn’t binding the function to the new elements.