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()。

e.g。

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

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

Answer 2

看看jquerys live，我想这就是你要找的。

Answer 3

除了Nalums anwser之外，谁声明你可以使用.live() - 即使你通过jQuery添加动态元素也可以使用 - 你应该在大多数情况下使用较新的.delegate()（版本添加：1.4.2 ）

可以这种方式使用：

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

或查看api.jquery.com/delegate/了解详情。

当AJAX请求完成时，JS函数不起作用（可能是$（this）问题）

问题

3 个答案: