javascript - 如何从动态创建的按钮获取属性？

Question

所以，我正在构建某种电子商务网站，我需要使用 nodejs 和 ajax 从 mysql 数据库导入一堆产品。

到目前为止，我已经做到了这一点，并在每个产品下方创建了某些按钮，这些按钮将引导至/product 页面，其中将显示该确切产品的附加信息。

由于这些按钮不是动态的，我需要添加一个属性，其中包含产品 ID，然后我将使用该属性向服务器发送 POST 请求，以便获取有关该特定产品的信息。

虽然我能够将属性添加到按钮本身，但我不知道如何获取它们的值。

这就是我将属性添加到按钮的方式。

$(function () {
        $.ajax({
            type: 'POST',
            url: '/getPacotes',
            success: function (data) {
                for (var i = 0; i < data.length; i++) {

                    var idPacote = data[i].idPacote;
                    var nomePacote = data[i].Nome_Pacote;
                    var precoPacote = data[i].Preco_Pacote;
                    var fornecedorPacote = data[i].Fornecedor_Pacote;
                    var foto = "https://webitcloud.net/PW/1617/RMR/Views/images/Pacotes/" + data[i].Foto;

                    var pacoteSet1 = "<div class='col-md-4 pacotes'>";
                    var pacoteSet2 = "<img src=" + foto + " alt='Mountain View' style='width:150px;height:150px;'><br><br><input id=btnPac" + i + "' type='button' name='comprar' value='Comprar Pacote'>";
                    var pacoteSet3 = "</div>";

                    $("#pacotes").append(pacoteSet1 + "<h1>" + nomePacote + "</h1>" + "<h2>" + fornecedorPacote + "</h2>" + "<h3>" + precoPacote + "euros/mes </h3>" + pacoteSet2 + pacoteSet3);
                    $(document).find("#btnPac" + i).attr({
                        "idPacote": idPacote
                    });
                }
            }
        });
    });

这就是我试图获取它们属性的方式

$("button").each(function () {
        console.log(this.idPacote);
        $.post("http://localhost:3000/pacote?id=" + this.idPacote);
    });

但是好像不行idPacote 返回未定义，我不知道为什么，因为我只是给按钮一个“id”并用“id”本身替换 idPacote，它将返回按钮 ID

很抱歉，如果这个问题听起来很愚蠢。我在这些事情上不是很有经验。

Answer 1

当您使用 jQuery 时，我建议您使用 HTML5 数据属性，以便为 HTML 元素设置指定的属性:

<button data-id="1"></button>

您可以使用 jQuery 设置和访问它:

$('button').data('id', value); //set data-id

$('button').data('id'); //Read data-id

<小时/>

进一步改变

<input id=btnPac" + i + "' type='button' name='comprar' value='Comprar Pacote'>

到

<button name='comprar'>Comprar Pacote</button>

为了从 $('button') 获取元素