Скрипт раздела работает только в одном представлении

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 означает, что «js-delete» считается классом css, а в html - атрибутом.Для поиска элементов с определенным атрибутом вам нужно "имеет атрибут" селектор:

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