jQuery 最喜欢的函数调用 api 与 ajax

Posted 2023-02-24

【中文标题】jQuery 最喜欢的函数调用 api 与 ajax

【英文标题】：Jquery favorite function call api with ajax

【发布时间】：2020-01-24 06:29:01

【问题描述】：

我正在尝试在我的 django 模板中创建一个收藏功能，让用户单击该图标，它将调用我制作的 api，以从用户数据中添加和删除该收藏项。

目前它的工作原理是，如果用户点击图标（收藏或不收藏），它将调用处理添加收藏或删除收藏的 api，并且它还将用相反的标签替换该标签的 DOM（例如，如果我点击最喜欢的，然后它的整个标签将被替换为具有不喜欢的图标和点击功能的标签内容）

这是我的标签的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”替换不包括包含图标的标签。

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

未捕获的引用错误：未定义 onclickFunction 在:1:1

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

编辑：

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

<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白色标签）

【参考方案1】：

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

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

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

然后，您可以从锚点中删除 onclick 属性 - 或者 - 实际上，如果它应该执行您的 jQuery 代码已经执行的操作之外的任何操作，则实际上在某个地方定义了该处引用的函数。

【讨论】：

我将我的两个 onclick 句柄都更改为您的建议，但现在每当我单击它时，控制台中都会显示“未捕获的 ReferenceError：onclickFunction 未在 :1:1 处定义”错误：/

看起来你根本不需要 onclick 属性

那我应该把我的href改成什么？因为如果我删除 href 属性然后我不能点击 标签，我试图更改为 href="#" 和我的 event.preventDefault();不再工作了，它把我带到了网址

您需要在两个处理程序中将事件传递给 click 函数（请参阅我更新的答案）。

可能是因为您没有在 mylink 点击处理程序中正确关闭 title 属性（缺少 "）