jQuery ajax 调用无法使用网络 api？

Question

我的页面上有几个条目，每个条目都有一个删除按钮，当我点击一个按钮时，ajax 没有调用 api ?

我想弄清楚我会在哪里犯错。 如果有人想通了。请告诉我。

按钮

<button type="button" data-entryId="@entry.Id" class="btn-delete btn btn-danger CustomStyleForEditAndDeleteButton">
   Delete
</button>

Api

// Get : api/entries/1
[HttpDelete]
public IHttpActionResult DeleteEntry(int id)
{
   var entryInDb = _context.Entries.SingleOrDefault(x => x.Id == id);
   if (entryInDb == null)
      return NotFound();
      else
         _context.Entries.Remove(entryInDb);
      _context.SaveChanges();

      return Ok();
}

jQuery

@section scripts{
    <script>
        $(document).ready(function () {
            jQuery(".btn-delete").click(function () {
                bootbox.confirm({
                    size: "small",
                    message: "Are you sure you want to delete this post?",
                    callback: function (result) {
                        if (result) {
                            jQuery.ajax({
                                url: "/api/entries/" + this.attr("data-entryId"),
                                method: "DELETE",
                                success: function () {
                                    bootbox.alert("The post is successfully deleted!");
                                },
                                error: function () {
                                    bootbox.alert("something goes wrong when attempting delete operation please try again.");
                                }
                            });
                        }
                    }
                });
            });
        });
    </script>
}

Thanks.

Answer 1

问题出在 jQuery 按钮上。 this.attr("//..")

正确jQuery代码：

            $(document).ready(function () {
            // #entriesDetails - Parent element of a button.
            jQuery("#entriesDetails").on("click", ".btn-delete", function () {

                var button = $(this);

                bootbox.confirm({
                    size: "small",
                    message: "Are you sure you want to delete this post?",
                    callback: function (result) {
                        if (result) {
                            jQuery.ajax({
                                url: "/api/entries/" + button.attr("data-entryId"),
                                method: "DELETE",
                                success: function () {
                                    bootbox.alert("The post is successfully deleted!");
                                    window.location.reload();
                                },
                                error: function () {
                                    bootbox.alert("something goes wrong when attempting delete operation please try again.");
                                    window.location.reload();
                                }
                            });
                        }
                    }
                });
            });

        });