JQuery любимая функция вызова API с AJAX

Question

Я пытаюсь создать любимую функцию в своем шаблоне django, которая позволяет пользователю нажимать на значок, и он вызывает API, который я сделал, чтобы отправить добавить и удалить этот любимый элемент из пользовательских данных.

В настоящее время, как это работает, если пользователь нажимает на значок (избранное или не избранное), он вызовет API, который обрабатывает добавить избранное или удалить избранное, а также он заменит DOM этого тега на противоположный (например, если я нажму на избранное, то весь его тег будет заменен содержимым тега, которое имеет нежелательный значок и функцию onclick)

здесь мойhtml для тега, он отображает базу, если он является любимым или нет (тег {%%} обрабатывает его с помощью django):

<div class="article-category">{{ property.get_type_display }}
     <div class="bullet"></div> {{ property.publish_date|date:'d-m-Y' }}
     {% if not request.user|is_favorite:property.id %}
         <a id="mylink" href="javascript:onclickFunction()" value="{{ property.id }}">
            <i class="far fa-heart fa-lg" style="color: red" title="Add to favorite"></i>
         </a>
      {% else %}
          <a id="mylink2" href="javascript:onclickFunction()" value="{{ property.id }}">
             <i class="fas fa-heart fa-lg" style="color: red" title="Remove from favorite"></i>
          </a>
      {% endif %}
 </div>

А вот мой скрипт jquery:

<script>
    $(document).ready(function () {
            $('#mylink').on('click', function (event) {
                event.preventDefault();
                property_id = $(this).attr("value")
                $.ajax({
                    type: "POST",
                    url: "http://localhost:9999/api/add_favorite/" + property_id + "/",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization', 'Bearer {{ refresh_token }}');
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            alert('ok');
                            replace_part_1 = '<a id="mylink2" href="javascript:onclickFunction()" value="' + property_id +'"><i class="fas fa-heart fa-lg" style="color: red" title="Remove from favorite></i></a>'
                            $("#mylink").replaceWith(replace_part_1);
                        }
                    }
                });
                return false;
            });
            $('#mylink2').on('click', function (event) {
                event.preventDefault();
                property_id = $(this).attr("value")
                $.ajax({
                    type: "DELETE",
                    url: "http://localhost:9999/api/remove_favorite/" + property_id + "/",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization', 'Bearer {{ refresh_token }}');
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            alert('ok');
                            replace_part_2 = '<a id="mylink" href="javascript:onclickFunction()" value="' + property_id +'"><i class="far fa-heart fa-lg" style="color: red" title="Add to favorite"></i></a>'
                            $("#mylink2").replaceWith(replace_part_2);
                        }
                    }
                });
                return false;
            });
        });
</script>

Теперь, когда я в первый раз щелкаю по избранному или избранному, отправленному в API и работаю, html-часть замены для события onclick «# mylink2», но замена «#mylink» не включает тег, содержащий значок.

После этого любое событие щелчка после этого не будет работать, и мне нужно обновить страницу, чтобы щелкнуть ее снова, чтобы работать.Любое событие щелчка после этого также возвращает эту ошибку:

Uncaught ReferenceError: onclickFunction не определена в: 1: 1

Я супер нуб в jquery, поэтому я могуКажется, я не могу понять, в чем дело, надеюсь, кто-то может мне помочь

РЕДАКТИРОВАТЬ:

Я изменил свой сценарий на этот, заменив атрибутом value тега привязки:

<script>
    $(document).ready(function () {
            $('.article-details').on('click', '#mylink', function(event) {
                event.preventDefault();
                property_id = $(this).attr("value")
                $.ajax({
                    type: "POST",
                    url: "http://localhost:9999/api/add_favorite/" + property_id + "/",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization', 'Bearer {{ refresh_token }}');
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            alert('ok');
                            replace_part_1 = '<a id="mylink2" href="#" value="' + property_id +'"><i class="fas fa-heart fa-lg" style="color: red" title="Remove from favorite></i></a>'
                            $("a[value='" + property_id + "']").replaceWith(replace_part_1);
                        }
                    }
                });
                return false;
            });
            $('.article-details').on('click', '#mylink2', function(event) {
                event.preventDefault();
                property_id = $(this).attr("value")
                $.ajax({
                    type: "DELETE",
                    url: "http://localhost:9999/api/remove_favorite/" + property_id + "/",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization', 'Bearer {{ refresh_token }}');
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            alert('ok');
                            replace_part_2 = '<a id="mylink" href="#" value="' + property_id +'"><i class="far fa-heart fa-lg" style="color: red" title="Add to favorite"></i></a>'
                            $("a[value='" + property_id + "']").replaceWith(replace_part_2);
                        }
                    }
                });
                return false;
            });
        });
</script>

и мой html:

<div class="article-category">{{ property.get_type_display }}
                                <div class="bullet"></div> {{ property.publish_date|date:'d-m-Y' }}
                                {% if not request.user|is_favorite:property.id %}
                                <a id="mylink" href="#" value="{{ property.id }}">
                                    <i class="far fa-heart fa-lg" style="color: red" title="Add to favorite"></i>
                                </a>
                                {% else %}
                                <a id="mylink2" href="#" value="{{ property.id }}">
                                    <i class="fas fa-heart fa-lg" style="color: red" title="Remove from favorite"></i>
                                </a>
                                {% endif %}
                            </div>

это работало, но щелчок #mylink при изменении html тега i внутри все еще исчезал (сработал щелчок # mylink2, он изменил htmlбелая бирка)

Answer 1

Похоже, вы столкнулись с проблемой делегирования события.Таким образом, в момент выполнения кода jQuery $('#mylink2') не существует в документе и, следовательно, событие не связывается. Вместо этого используйте делегирование события :

$('.article-category').on('click', '#mylink2', function(event) {
   event.preventDefault();
   // your original click handler
});

#myParentWrapper должно быть элементом, соответствующим вашей разметке, предпочтительно не body или document по соображениям производительности.

Затем вы можете удалить атрибут onclick из своего якоря - или - фактически где-то определить функцию, на которую есть ссылка, если она должна делать что-то кроме того, что уже делает ваш код jQuery.