javascript - 脚本部分仅在一种 View 中起作用

Question

我有一个 C# MVC 的大型项目。在其中一个 View 中，在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>
}

它就像一个魅力。但从另一个 Angular 来看，我有这样的代码:

<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>
}

而且它不起作用。我的意思是，它编译时没有任何错误或警告，但是当我单击删除按钮时什么也没有发生(应该弹出确认框)。

我做错了什么？

如果需要，我可以提供这两个 View 的完整代码。

Answer 1

.js-delete 表示“js-delete”被假定为一个 css 类，而在 html 中它是一个属性。要搜索具有特定属性的元素，您需要 "has attribute"选择器:

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