Question

I have an edit button that, when clicked, triggers the first event below. It(edit form) also have a cancel link that, when clicked, triggers the second event below. How do I ensure that the PrevContent value is accessible within the cancel event? The user may click on any number of corresponding edit links at one time.

$('.js-profile-edit').live('click',function(){

    var TrBlock     = $(this).closest('tr');
    var PrevContent = TrBlock.html();
    var colspan     = TrBlock.parent().prev().find('a:first').first().data('span');

    $.ajax({
        url     : $(this).attr('href'),
        type    : 'GET',
        success : function(response){
            TrBlock.html('<td colspan="'+colspan+'">'+response+'</td>');
        },
        error    : function(jqXHR, textStatus, errorThrown){
            uiAlert({message : 'Something Broke. Try again later'})
        }
    });
    return false;
});


$('.js-profile-edit-cancel').live('click',function(){
    $(this).closest('tr').html(PrevContent);
    return false;
});

Answer 1

You should be able to store the prevContent as .data() on the closest <tr>:

$('.js-profile-edit').live('click',function(){

    var TrBlock     = $(this).closest('tr');
    var PrevContent = TrBlock.html();
    TrBlock.data({contents: PrevContent});  // save it
    ...
})

$('.js-profile-edit-cancel').live('click',function() {
    var TrBlock = $(this).closest('tr');
    TrBlock.html(TrBlock.data('contents'));
    return false;
});