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

Question

我有一个使用过滤数据动态生成的 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，但没有任何效果。我究竟做错了什么？另外，您能否推荐一些学习 Material ，以便我可以更清楚地了解这部分内容？ 提前致谢。问候。

Answer 1

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

HTML

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

jQuery

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