jquery - 如何删除表格行？

Question

我试图使以下代码在过去 5-6 小时内工作，但没有运气。

谁能帮我理解这段代码有什么问题？单击删除链接后，没有任何反应。

这是我的桌子：

<table id="links">
    <tr id="record-<?php echo $row['FeePaymentId']; ?>">
        <td><?php echo $row['MasterEntryValue']; ?></td>
        <td><?php echo $row['Amount']; ?></td>
        <td><a href="#" class="delete">delete</a></td>
    </tr>
</table>

这是我的 JavaScript：

$('table#links td a.delete').click(function() {
    if (confirm("Are you sure you want to delete this row?")) {
        var id = $(this).parent().parent().attr('id');
        var data = 'id=' + id ;
        var parent = $(this).parent().parent();

        $.ajax({
            type: "POST",
            url: "DeleteRow.php",
            data: data,
            cache: false,
            success: function() {
                parent.fadeOut('slow', function() {$(this).remove();});
            }
        });                
    }
})

Answer 1

如果页面中没有其他 JS 错误并且 click 事件根本没有触发，则您的 JS 没有任何问题。不仅仅是将您的 JS 代码放在 $(document).ready(function () {}); 中：

$(document).ready(function () {
    $('table#links td a.delete').click(function()
    {
        if (confirm("Are you sure you want to delete this row?"))
        {
            var id = $(this).parent().parent().attr('id');
            var data = 'id=' + id ;
            var parent = $(this).parent().parent();

            $.ajax(
            {
                   type: "POST",
                   url: "DeleteRow.php",
                   data: data,
                   cache: false,

                   success: function()
                   {
                        parent.fadeOut('slow', function() {$(this).remove();});
                   }
             });                
        }
    })
});

Answer 2

选择器不正确，试试这个：$('#links a.delete')这将选择 id 为 'links' 的元素下的所有具有类 'delete' 的锚元素

jsfiddle