javascript - AJAX 请求完成后 JS 函数不起作用(可能是 $(this) 问题)

Question

我的站点有一个表单，该表单使用 ajax 将记录插入数据库，同时，它在显示该新记录的同一页面中也使用 AJAX“刷新”一个表。

所以我有JS代码

// 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;
});

基本上，它会在数据库中插入一条新记录，然后在成功时请求一个仅包含表格的页面，并用返回的数据填充 div。提交数据时有点刷新。一切都使用 AJAX 完成。

我已经上传了情况图片以便更好地理解。 image

问题

一切顺利，直到您尝试删除“刷新”的表格行。如果没有 AJAX(仅按 F5)，我可以通过删除按钮删除我想要的任何行，但是当我插入一行并尝试删除表中的任何行时，将无法执行。这是删除按钮代码

// 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;
});

我怀疑问题出在$(this)，它在刷新表格后不引用删除按钮元素，但我不知道如何解决。

Answer 1

如果正在重新加载整个表格，则 .click() 将无法工作，因为它会丢失应用到的元素。尝试使用 .live() 代替。

例如

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

同时将 $(this) 分配给一个变量并使用该变量，我认为它可以帮助使代码更清晰一些。例如var $deleteButton = $(this);