如何避免在第二次调用后在 ajax 上附加重复项？

Question

我有一个名为 File 的按钮，它是一个下拉菜单，其中包含另一个名为 open 的按钮。一旦用户单击打开，我就会有一个 ajax GET 请求，该请求在每次调用后附加一个按钮。

当用户单击打开一次时，按钮被附加。但是，当用户再次单击打开时，会再次附加相同的按钮，具有相同的属性，如果用户第三次单击打开按钮，则该按钮会再次附加一次，因此总共是 3 次。

如何确保按钮只附加一次？

{{}} 来自 django web 框架，不是问题

      <input type = "button" class = "openGraph" value = "{{titles}}" id="{% url 'openGraph' title=titles.id %}">

这是用户按下打开按钮时发生的情况。

 $(document).ready(function(){

                $('#openXML').on('click',function(event){

                    var csrftoken = getCookie('csrftoken');

                    $.ajax({

                        type: "GET",

                        url: "/loadTitles/",

                        dataType: 'text',

                        headers:{

                            "X-CSRFToken": csrftoken

                            },

                        success: function(data){

                            var json = JSON.parse(data)

                            var length = Object.keys(json).length                               

                            var pk = "/openGraph/" + json[length-1]['pk']

                            var title = json[length-1]['fields']['title']

                            myButton="<input type=\"button\" class = \"openGraph\" value=\""+title+"\" id="+pk+"/\>";

                            $("#loadAllTitles").append(myButton)

                        }

                    });

                })

            });

Answer 1

因为 ID 必须是唯一的，所以我建议在添加之前测试按钮是否已经存在。因此，您需要更改此行：$("#loadAllTitles").append(myButton)和：if ($("#loadAllTitles").find('#' + $.escapeSelector(pk + '/')).length == 0)&nbsp; $("#loadAllTitles").append(myButton)我收到以下控制台错误：未捕获的错误：语法错误，无法识别的表达式：#/openGraph/104 –如果您使用的是 jQuery 3.x，您需要使用：jQuery.escapeSelector()：转义任何在 CSS 选择器中具有特殊含义的字符。更新 虽然pk是您创建新元素时的 ID，但您在此 ID 中添加了 final /。这是你的问题。$('button').on('click', function(e) {&nbsp; &nbsp; var pk = '#/openGraph/104';&nbsp; &nbsp; var title='title';&nbsp; &nbsp; myButton="<input type=\"button\" class = \"openGraph\" value=\""+title+"\" id="+pk+"/\>";&nbsp; &nbsp; if ($("#loadAllTitles").find('#' + $.escapeSelector(pk + '/')).length == 0)&nbsp; &nbsp; &nbsp; &nbsp; $("#loadAllTitles").append(myButton)})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="loadAllTitles"></form><button type="button">Click to add the same input field</button>

Answer 2

检查第 3 行是否存在按钮$(document).ready(function(){&nbsp; &nbsp; $('#openXML').on('click',function(event){&nbsp; &nbsp; &nbsp; &nbsp; if (!$('#+pk+').length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Your code&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}