Django: Использование jquery ajax для запуска функции при нажатии кнопки

Я пытаюсь запустить функцию при нажатии кнопки без обновления страницы используя jQuery ajax метод, но это не работает. Иногда click event срабатывает, иногда нет. Функция работает без jquery и ajax, но тогда страница обновляется, конечно же. Есть идеи, как можно это исправить?

Template (без jquery):

<a id="addWord" href="{% url 'vocab:add-custom' word.pk %}" class="btn btn-warning btn-sm">Add</a>

Template (with jquery):

    <a id="addWord" href="" class="btn btn-warning btn-sm">Add</a>

  <script type="text/javascript">
    var wordpk = "{{word.pk}}";
  </script>

View:

def custom_create_word(request, object):
    if request.method == 'POST':
        pass
    if request.method =="GET":
        from .forms import WordForm
        from .models import Word
        word = Word.objects.get(pk=object)
        user = request.user
        target_word = word.target_word
        source_word = word.source_word
        deck_name = "My Words"
        fluency = 0
        Word.objects.create(user=user, target_word=target_word,
                             source_word=source_word, deck_name=deck_name, fluency=fluency)
    return HttpResponseRedirect(reverse('vocab:dict'))

url:

app_name='vocab'

    path("<int:object>/",views.custom_create_word,name="add-custom"),

js:

$(document).ready(function(){
$("#addWord").click(function() {
  alert('click is working');
  $.ajax({
        url: "/vocab/"+wordpk+"/",
        success: function(result) {
          $("#addWord").html(result);
          alert("it worked");
        }});
      });
    });