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

我希望能够在用户点击＆＃34; X＆＃34;时获得列表项的值。链接所以我可以查询数据库并删除该项目。

$(".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');
    });
});

Answer 2

您可以使用链接本身传输该信息。将删除URL设置为链接href或使用data-*属性来存储证书ID等。

在data-*属性中设置ID：

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

并在事件处理程序中检索该值：

$( ".usercert a" ).click( function( event ) {
    event.preventDefault();

    /* get certificate ID from the link element */
    var certId = parseInt( this.dataset.certificateId ),
        deleteUrl = '//example.org/delete/cert/' + certId;

    console.log( deleteUrl );


    /* …or use the link URL directly */
    var deleteUrl = this.href;

    console.log( deleteUrl );

} );

当单击列表中的每个项目的链接时，调用函数来删除项目

2 个答案: