如何避免在第二次调用后在 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)
  $("#loadAllTitles").append(myButton)

我收到以下控制台错误：未捕获的错误：语法错误，无法识别的表达式：#/openGraph/104 –

如果您使用的是 jQuery 3.x，您需要使用：

jQuery.escapeSelector()：转义任何在 CSS 选择器中具有特殊含义的字符。

更新 虽然 pk 是您创建新元素时的 ID，但您在此 ID 中添加了最终的 /。这是你的问题。

$('button').on('click', function(e) {
    var pk = '#/openGraph/104';
    var title='title';
    myButton="<input type=\"button\" class = \"openGraph\" value=\""+title+"\" id="+pk+"/\>";
    if ($("#loadAllTitles").find('#' + $.escapeSelector(pk + '/')).length == 0)
        $("#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(){
    $('#openXML').on('click',function(event){
        if (!$('#+pk+').length) {
                // Your code
        }
    }
}