javascript - 在用户单击链接或按钮时调用 ajax 帖子

Question

            <tr>
                <td>
                    <span id="id_1">
                        <a href="/Path" >Name</a>   <a href="#">Delete</a>
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="id_2">
                        <a href="/Path" >Name</a>   <a href="#" >Delete</a>
                    </span>
                </td>
            </tr>

你好呀！

我有一个如上所述的表格，我有兴趣在单击删除时触发 ajax 帖子。

我不确定如何确定单击了哪个删除。我可以添加任何我想要的 id。

然后在jquery方面：

    $.post("/Attachment/RemoveAttachment", { id: "1", fooId: , barId: })
        .done(function (data) {
            alert("Data Loaded: " + data);
        });

我需要确保仅在用户单击“删除”按钮时才触发此操作。

任何帮助都是值得的

Answer 1

作为回应，“我不确定如何确定单击了哪个删除。” 请参阅以下内容：

HTML：

<td>
                    <span id="id_2">
                        <a href="/Path" >Name</a>   <a href="#" class="delete">Delete</a>
                    </span>
                </td>

jQuery：

$('.delete').click(function() {
    var id = $(this).parent().attr('id');
    $.post("/Attachment/RemoveAttachment", { id: id, fooId: , barId: })
        .done(function (data) {
            alert("Data Loaded: " + data);
        });
});

Answer 2

给每个删除链接一个“删除”类：

<a href="#" class="delete">Delete</a>

然后为 onclick 事件编写一个事件处理程序，该事件将触发您的 AJAX 调用：

$('a.delete').click(function () {
    var id = $(this).parent().attr('id').replace('id_', '');
    // your AJAX call goes here
    // var id contains the id from the span, so place it where appropriate
    $.post('/Attachment/RemoveAttachment', {
        id: '1',
        fooId: ,
        barId: 
    }).done(function (data) {
        alert("Data Loaded: " + data);
    });
});

Answer 3

您应该使用包含 id 的属性（更清洁的恕我直言）。在您阅读的处理程序中：

<a href="#" data-id="2" class="delete">Delete</a>

$('a.delete').click(function () {
var theId = $(this).attr("data-id");
// delete ...
$.post("/Attachment/RemoveAttachment", { id: theId })
        .done(function (data) {
            alert("Data Loaded: " + data);
        });
});