Мой модал не появляется, из-за трудностей нацеливания кнопки в таблице с помощью селекторов

Question

Я пытаюсь, чтобы при нажатии кнопки «Удалить» рядом с каждой строкой таблицы появлялось «Удалить подтверждение модального». Я не уверен, что это проблема с моим JavaScript или HTML.

$("#confirmDelete delete").on("click", function () {
            $("#confirmDelete").modal('show');
        });

        $("delete").on("click", function () {
            console.log("Ive been pushed");
            var button = $(this);
            $.ajax({
                url: "/Services/DeleteService/" + button.attr("data-customer-id"),
                method: "DELETE",
                success: function () {
                    $(button.parent("tr")).remove();
                    console.log("Success");
                }
            });
        });


<table id="services" class="table table-bordered table-hover">
        @foreach (var service in Model)
        {
            <tr>
                <td>@service.Name</td>
                <td><button id="edit" class="btn btn-info edit">Edit</button>  <button class="btn btn-danger delete" data-service-id=@service.Id data-target="#confirmDelete"><i class="fa fa-trash-o fa-lg"></i></button></td>
            </tr>
        }
    </table>

Answer 1

Ваш селектор jQuery в строке 4 ищет тег удаления вместо класса удаления - он пытается найти что-то вроде

<delete></delete>

Если вы хотите добавить обработчик кликов к кнопке удаления, добавьте"."перед селектором сказать jQuery найти элемент с классом «delete» вместо типа «delete».Например:

$(".delete").on("click", function () {

'.'будет искать элементы с классом удаления.

PS у вашей кнопки подтверждения удаления будет та же проблема, если вы ищете один с классом «удаления».