时间戳

首页 > 解决方案 > 使用 JQuery/JavaScript 在 .append() 中添加带有 onclick 事件的按钮

javascript - 使用 JQuery/JavaScript 在 .append() 中添加带有 onclick 事件的按钮

问题描述

我想将删除按钮添加到状态为 ORDERED 的每一行。我尝试了不同的变化。即使 data[i] 不是未定义的，此解决方案也可以正常工作而不会出现“无法读取未定义的属性 'id'”的错误。在 .click() 给出正确的 id 之前发出警报。这里有什么问题？我可以在这里做一些不同或更好的事情吗？

).done( (data, status, jqXHR) => {
        if(data[0].order_username != undefined) {
            $("#orders_table").empty();
            for(var i = 0; i < data.length; i++) {
                var button = "";
                if(data[i].status == "ORDERED") {
                    button = "<td><button class='delete'>Delete</button></td>";

                }

                $("#orders_table").append(
                    "<tr>" +
                    "<td>" + data[i].order_username + "</td>"+
                    "<td>" + data[i].work_description + "</td>" +
                    "<td>" + dateFormatter(data[i].orderdate) + "</td>" +
                    "<td>" + dateFormatter(data[i].startdate) + "</td>" +
                    "<td>" + dateFormatter(data[i].readydate) + "</td>" +
                    "<td>" + dateFormatter(data[i].accepteddate) + "</td>" +
                    "<td>" + dateFormatter(data[i].denieddate) + "</td>" +
                    "<td>" + data[i].comment_of_work + "</td>" +
                    "<td>" + data[i].hours + "</td>" +
                    "<td>" + data[i].approx_budget + "</td>" +
                    "<td>" + data[i].status + "</td>" +
                    button + 
                    "</tr>"
                )

                alert(data[i].id);
                $(".delete").click(() => {
                    deleteUser(data[i].id);
                })
            }
        }

        function deleteUser(key) {
            $.ajax(
            {
                url: "http:localhost:3001/workorders_delete/"+key,
                method: 'delete'
            }).done( (data, status, jqXHR) => {

            }).fail( (jqXHR, status, errorThrown) => {
                console.log("Call failed: "+errorThrown);
            });
    }

标签： javascriptjquery

解决方案

您可以使用响应数据中的 id 为删除按钮设置唯一数据属性，如下所示：-

 if(data[i].status == "ORDERED") {
     button = "<td><button class='delete' data-deleteId = 
              "+data[i].id+">Delete</button></td>";
 }

然后您可以为删除按钮编写一个单击事件侦听器，如下所示：-

$(".delete").click(function(){
    var id = $(this).data("deleteId");
    deleteUser(id);
});

在您的代码中：-

  $(".delete").click(() => {
    deleteUser(data[i].id);
  });

函数 deleteUser() 在点击时被调用或执行，此时 data[i].id 将不会被定义。

推荐阅读