如何避免在第二次调用后在 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 中添加了 final /。这是你的问题。

$('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

        }

    }

}