Как правильно объединить эти функции AJAX и jQuery?

Question

Каждый раз, когда я нажимаю эту кнопку:

<a onclick="AddToWishList(@item.id)" id="swapHeart" class="btn btn-default swap">
     <span class="glyphicon glyphicon-heart-empty"></span>
</a>

Я хочу, чтобы кнопка меняла состояние с помощью jQuery при каждом вызове функции AJAX

AJAX:

<script>
    function AddToWishList(item_id) {
        $.ajax({
            type: "POST",
            data: {
                itm_id: item_id
            },
            url: "/WishList/AddToWishList",
            success: function (e) {
                e.preventDefault();
            },
            error: function () {
                return "error";
            }
        });
    }
</script>

jQuery:

<script src="~/lib/jquery/dist/jquery.min.js">
</script>
<script>
    jQuery(function ($) {
        $('#swapHeart').on('click', function () {
            var $el = $(this),
                textNode = this.lastChild;
            $el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
            $el.toggleClass('swap');
        });
    });
</script>

Поэтому моей первой мыслью было то, что мне нужно было объединить эти две функции вместе как одну функцию.Но как?Потому что кнопка сначала обрабатывает функцию AJAX, а затем jQuery.

Заранее спасибо!

Answer 1

Избавьтесь от onclick и передайте идентификатор элемента в атрибут данных.

<a id="swapHeart" data-item_id="@item.id" .... </a> 

Затем сделайте все внутри обработчика щелчков jQuery

$('#swapHeart').on('click', function(e) {
  e.preventDefault();// calling this in success of ajax is too late
  var $el = $(this);

  $.ajax({
    type: "POST",
    data: {
      itm_id: $el.data('item_id')// from data attribute
    },
    url: "/WishList/AddToWishList",
    success: function(data) {
      // do something with or based on response data

      $el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
      $el.toggleClass('swap');
    },
    error: function() {
      console.log("ajax error");
    }
  });

});