Событие щелчка ссылки по классу в JavaScript не работает

Question

У меня есть таблица с некоторыми <td> с, и у меня есть ссылка для удаления каждой строки с классом .DeleteMe.У меня есть пост-вызов AJAX в jQuery, но когда я нажимаю на ссылку, она ничего не делает (событие щелчка не работает).

 $(document).ready(function () {
        $(".DeleteMe").click(function () {
            var button = $(this);
            var DeleteId = $(this).data("deleteid");
            debugger;
            $.ajax({
                url: "/Merchant/DeleteProduct/" + DeleteId,
                type: "Post"
            }).done(function () {
                $(button).parents("tr").remove();
            }).error(function () {
                alert("Something Went Wrong.");
            })
        })
    });

А вот ссылка в каждой строке:

 <a class="btns delete-icon DeleteMe" data-deleteid="@item.id">Delete</a>

Как мне заставить эти ссылки работать?

Answer 1

Я предполагаю, что ваши строки создаются динамически после того, как ваше событие было прикреплено. В этом случае я бы рекомендовал использовать event-Delegation вместо:

$(document).ready(function () {
        $(document).on('click', '.DeleteMe', function () {
            var button = $(this);
            var DeleteId = $(this).data("deleteid");
            debugger;
            $.ajax({
                url: "/Merchant/DeleteProduct/" + DeleteId,
                type: "Post"
            }).done(function () {
                $(button).parents("tr").remove();
            }).error(function () {
                alert("Something Went Wrong.");
            })
        })
    });