javascript - 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 并工作，“#mylink2”onclick 事件的替换 html 部分，但“#mylink”替换不包括包含图标的标签。

在此之后，任何点击事件都将不起作用，我必须刷新页面才能再次点击它才能工作。此后的任何点击事件也会返回此错误:

Uncaught ReferenceError: onclickFunction is not defined at :1:1

我是 jquery 的 super 菜鸟，所以我似乎找不到问题所在，希望有人可以帮助我

编辑:

我通过替换 anchor 标记的值属性将脚本更改为:

<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>

它有效，但更改 html 中的 i 标记时，#mylink 的 onclick 仍然消失(#mylink2 onclick 有效，它将 html 更改为白色标记)

Answer 1

您似乎面临事件委托(delegate)问题。也就是说，当您的 jQuery 代码运行时，文档中不存在 $('#mylink2') ，因此事件不会被绑定(bind)。 Use event delegation instead :

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

#myParentWrapper 应该是在标记中保持一致的元素，出于性能原因，最好不是 body 或 document。

然后，您可以从 anchor 中删除 onclick 属性 - 或者 - 实际上在某个地方定义引用的函数(如果它应该执行 jQuery 代码已执行的操作以外的操作)。