javascript - 向动态HTML列表添加详细信息按钮

我有一个使用过滤数据动态生成的HTML列表。

<tbody>
            @{
                foreach (var item in listado.Where(x => x.Raw != null)) {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.Usuario</td>
                        <td>@item.NIF_CIF</td>
                        <td>
                            @if (!(String.IsNullOrEmpty(item.Telefono)) && !(String.IsNullOrWhiteSpace(item.Telefono))) {
                                @item.Telefono
                            } else {
                                @Html.Raw("No disponible")}
                        </td>
                        <td>@Math.Round(item.PrecioTotal)&nbsp;&euro;</td>
                        <td>@item.FechaCreacion.ToShortDateString()</td>
                        <td>
                            <button id="detalles@(item.Id)">Detalles</button>
                        </td>
                    </tr>
                    <tr id="vistaDetalles@(item.Id)" hidden>
                        <td>Detalles del presupuesto</td>
                    </tr>
                }
            }
        </tbody>

我尝试使用item.Id标记按钮，然后在此脚本中指向它：

<script>
$("document").ready(function (Id) {
    $("#detalles"+ Id).click(function (Id) {
        $("#vistaDetalles" + Id).show();
    });
});</script>

我也尝试过不标记它们并捕获所有按钮（删除+ Id部分），并且使用相同的技术捕获所有隐藏的tds，但没有任何效果。我究竟做错了什么？另外，您可以推荐一些学习材料，以便使本部分更加清楚吗？
提前致谢。问候。

最佳答案

您可以为此目的使用数据属性

的HTML

<button class="detalles" data-itemid="@item.Id">Detalles</button>

jQuery的

$(".detalles").on("click",function(){
   var itemId = $(this).data('itemid');
   $('#vistaDetalles'+itemId).show();
});