JS function doesn't work when AJAX request is done (Maybe a $(this) problem)

Question

My site has a form which insert records in a database using ajax, at the same time, it "refreshes" a table also using AJAX in the same page showing this new record.

So I have the JS code

// New Record Div
$('button[type=submit]').click(function() {
    // Read all the form content
    var creditor = $('#selCreditor').val();
    var reason = $('#txtReason').val();
    var value = $('#txtValue').val();
    var debtor = $('#selDebtor').val();
    $.ajax({
    type: 'POST',
    url: 'index/insert/creditor/'+creditor+'/reason/'+reason+'/value/'+value+'/debtor/'+debtor,
    success: function() {
        $('#status').slideDown();
        $('#latestRecords').fadeOut();
        $.ajax({
        type: 'POST',
        url: 'index/latest',
        success: function(html) {
            $('#latestRecords').fadeIn();
            $('#latestRecords').html(html);
        }
        });
    }
    });
    return false;
});

Basically, it inserts a new record in the database, then on success, it requests a page which contains only the table and populate the div with the returned data. It's sort of a refresh when the data is submitted. Everything is done using AJAX.

I've uploaded the situation image for a better understanding. image

The Problem

Everything goes fine until you try to delete a "refreshed" table row. Without the AJAX (only press F5) I can delete any row I want through the delete button, but when I insert a row and the try to delete any row in the table won't do. This is the Delete button code

// TR Fading when deleted
$('.delete').click(function() {
    $.ajax({
    type: 'POST',
    url: 'history/delete/id/'+$(this).attr('id')
    });
    $(this).closest('tr').fadeOut('slow', function() { $(this).remove(); });
    $('#latest')
    return false;
});

I suspect that the problem is $(this) which not refers to the delete button element once the table is refreshed, but I don't know how to fix it.

Answer 1

If the entire table is being reloaded then .click() wont work as it will have lost the elements it was applied to. Try using .live() instead.

e.g.

$('.delete').live('click',function(){...});

Also assign $(this) to a variable and use the variable instead, it can help make the code a bit clearer I think. e.g. var $deleteButton = $(this);

Answer 2

take a look at jquerys live, i think this is what you're looking for.

Answer 3

In addition to Nalums anwser, Who stated that you can use .live() — which will work even if you add dynamic elements through jQuery — you should instead use for most occasions the newer .delegate() (version added: 1.4.2)

Could be used in this fashion:

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

Or check out api.jquery.com/delegate/ for more information.