使用JQuery / JavaScript在.append（）中添加帶有onclick事件的按鈕

Question

我想向狀態為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);
            });
    }

Answer 1

您可以使用響應數據中的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。

Answer 2

為什么data[i] undefined ？

在循環中， i是對循環后具有值data.length的同一變量的引用。

不出所料， data[data.length]是undefined 。 使用.click() alert(i)檢查。

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

一個簡化的例子：

 (function wrong() { var array = []; for (i = 0; i < 2; i++) { array.push(() => { console.log(i); }); } array.forEach(click => click()); })(); 

解決方案是在循環中創建一個新的const ：

 (function right() { var array = []; for (i = 0; i < 2; i++) { const constI = i; array.push(() => { console.log(constI); }); } array.forEach(click => click()); })(); 

此外...

$(".delete")表示在您注冊.click()存在的所有刪除按鈕。

您應該只在最后一個刪除按鈕上注冊：

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