javascript - 有关 ajax 和识别表中数据的问题

Question

我正在拼命尝试通过按我网站上的“删除”按钮来访问 $BarcodeID。我想要做的就是检索这个 13 位数字，以便我可以使用它从项目数据库 (Sql) 中删除该行。

我知道只要获得正确的行，我就可以获得数据，但我想知道这是否可能，因为我正在 $.post() 内构建表格。

请注意，在我开始尝试制作按钮并在点击函数中获取条形码ID 之前，所有代码都在工作。谢谢!

$(document).ready(function(){
$.get("../php/security.php", function(response){
        if(response.result == "failure"){
            location.href='../user_login.html';
        } else {
            $("#header").load("../header_logout.html");
            $.post("../php/item_database.php", {email1:response.data.authUser}, function(indata){
                indata.items.forEach(function(element){
                    $BarcodeID = element.BarcodeID;
                    $UserID = element.UserID;
                    $ProductName = element.ProductName;
                    $BrandName = element.BrandName;
                    $Weight = element.Weight;
                    $row = "<tr><td id='rowbarcode'>" + $BarcodeID + "</td>" + "<td>" + $ProductName + "</td>" + "<td>" + $BrandName + "</td>" + "<td>" + $Weight + "</td>" + "<td>" + "<button class='delete'>Delete</button>" + "</td></tr>";
                    $("#final_row").before($row);
                });
            }, "json");//eo post
        } //eo else
 }, "json"); //eo get

$(".delete").click(function(){
    // var BarcodeID = $(this).closest('tr').find('#rowbarcode').val();
    var BarcodeID = $(this).parent().find("#rowbarcode").text();
    var $row = $(this).closest("tr");        // Finds the closest row <tr> 
    var $tds = $row.find("td:nth-child(1)"); // Finds the 2nd <td> element
    console.log($tds);
    //all I want is $BarcodeID
});

});//eof

现场 table 图片:

Answer 1

对于任何感兴趣的人，我找到了一种解决我的问题的非常巧妙的方法。感谢所有帮助@Pointy @Taplar @Andreas 的人。我需要的是“动态创建的元素上的事件绑定(bind)”。当与 $.post 和 $.get 操作链接时它特别有用，因为它们使数据检索变得复杂。

控制台输出示例:

5000157024671 <- 如果我单击第一个删除按钮

6221033101517 <- 如果我点击第二个删除按钮

下一阶段: 由于这只是对必须从数据库中删除的条形码编号的引用，我现在将通过后操作将其传递到 php。

我的项目的下一部分(添加行搜索功能)可以在这里找到: Dynamically created table queries

示例解决方案代码:

$(document).ready(function(){
$.get("../php/security.php", function(response){
        if(response.result == "failure"){
            location.href='../user_login.html';
        } else {
            $("#header").load("../header_logout.html");
            //from here down is the relevant code
            $.post("../php/item_database.php", {email1:response.data.authUser}, function(indata){
                indata.items.forEach(function(element){
                    $BarcodeID = element.BarcodeID;
                    $UserID = element.UserID;
                    $ProductName = element.ProductName;
                    $BrandName = element.BrandName;
                    $Weight = element.Weight;
                    $row = "<tr class='row'><td class='rowbarcode'>" + $BarcodeID + "</td>" + "<td>" + $ProductName + "</td>" + "<td>" + $BrandName + "</td>" + "<td>" + $Weight + "</td>" + "<td>" + "<button class='delete'>Delete</button>" + "</td></tr>";
                    $("#final_row").before($row);
                });
            }, "json");//eo post
        } //eo else
 }, "json"); //eo get

$(".contenttable").on('click', '.delete', function(){
    var BarcodeID = $(this).closest('tr').find('.rowbarcode').text();
    console.log(BarcodeID);
});

});//eof