Question

我在C＃MVC中有一个庞大的项目。在其中一个视图中，在index.cshtml中，我有一个这样的代码：

@model IEnumerable<Library.Models.Customer>

@{
    ViewBag.Title = "Customers";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Klienci</h2>

<p>
    @Html.ActionLink("Nowy klient", "New", "Customers", null, new { @class = "btn btn-primary" })
</p>

<table id ="customers" class="table table-bordered table-hover">
    <thead>
    <tr>
        <th>Klient</th>
        <th>Typ Czlonkostwa</th>
        <th>Usun</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

@section scripts
{
    <script>
        $(document).ready(function () {
            var table = $("#customers").DataTable({
                ajax: {
                    url: "/api/customers",
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "Name",
                        render: function(data, type, customer) {
                            return "<a href='/customers/edit/" + customer.Id + "'>" + customer.Name + "</a>";
                        }
                    },
                    {
                        data: "MembershipType.Name"
                    },
                    {
                        data: "Id",
                        render: function(data) {
                            return "<button class='btn-link js-delete' data-customer-id=" + data + ">Delete</button>";
                        }
                    }
                ]
            });

            $("#customers").on("click", ".js-delete",
                function () {
                    var button = $(this);

                    if (confirm("Na pewno chcesz usunac?")) {
                        $.ajax({
                            url: "/api/customers/" + button.attr("data-customer-id"),
                            method: "DELETE",
                            success: function () {
                                //datatable methods - row, remove and draw
                                table.row(button.parents("tr")).remove().draw();
                            }
                        });
                    }
                });
        });
    </script>
}

它就像一个魅力。但在另一种观点中，我有这样的代码：

<table id="customers" class="table table-bordered table-hover">
<thead>
<tr>
    <th>Ksiazka</th>
    <th>Gatunek</th>
    <th>Delete</th>
</tr>
</thead>
<tbody>
@foreach (var book in Model)
{
    <tr>
        <td>@Html.ActionLink(book.Name, "Edit", "Books", new { id = book.Id }, null)</td>
        <td>@book.Genre.Name</td>
        <td>
            <button class="btn-link" js-delete>Delete</button>
        </td>
    </tr>
}
</tbody>

@section scripts
{
    <script>
        $(document).ready(function() {
            $("#customers .js-delete").on("click",
                function() {
                    confirm("Sure?");
                });
        });
    </script>
}

它不起作用。我的意思是，它编译没有任何错误或警告，但当我单击删除按钮没有任何反应（应弹出确认框）。

我做错了什么？

如果需要，我可以提供这两种观点的完整代码。

Answer 1

.js-delete表示＆＃34; js-delete＆＃34;假设是一个css类，而在html中它是一个属性。要搜索具有特定属性的元素，您需要"has attribute"选择器：

$("#customers [js-delete]")

脚本部分仅适用于一个视图

1 个答案: