jquery - 单击列表中每个项目的链接时调用函数以删除项目

Question

我有一个 jquery 函数来从数据库中获取项目列表。我想在每个项目旁边放置一个链接，我可以在其中调用函数以从数据库中删除该项目。

function GetCertifications() {
       $("#userCertifications").empty();
       $("#certificationCount").text("Total - 0");
       var userId = $('#userId').val();
       // console.log("Current user Id to get certs " + userId);
       var i = 0;
       $.getJSON('json_data.php', { method: 'getCertifications', userId: userId }, function(data) {
          $.each(data, function(key, value) {
             i++;
             $("#certificationCount").text("Total - " + i);
             $("#userCertifications").append('<div class="usercert"><li>' + value.certName + '</li><a href="#">X</a></div>');
          });
       });
    }

我希望能够在用户单击“X”链接时获取列表项的值，以便我可以查询数据库并删除该项目。

$(".usercert a").click(function() {
       alert("delete usercert");
    });

如何将值传递到此函数中？我正在使用警报进行测试，但警报没有被调用。

Answer 1

您可以向每个具有要传递的 id 的链接添加 data-id 属性，然后添加点击处理程序:

$("#userCertifications").append('<div class="usercert"><li>' + value.certName + '</li><a href="#" data-id="' + value.id + '">X</a></div>');

$(document).ready(function() {
    $(".usercert a").click(function(event) {
        var id= $(event.target).data('id');
    });
});