Как избежать добавления дубликатов на ajax после второго вызова?

Question

У меня есть кнопка «Файл», которая представляет собой выпадающий список, в котором есть еще одна кнопка с именем «Открыть».Как только пользователь нажимает кнопку «Открыть», у меня есть запрос GET ajax, который добавляет кнопку после каждого вызова.

Когда пользователь нажимает кнопку «Открыть» один раз, кнопка добавляется.Однако, когда пользователь снова нажимает кнопку открытия, к той же кнопке снова добавляются те же атрибуты, и если пользователь нажимает кнопку открытия в третий раз, когда кнопка добавляется еще раз, то есть в общей сложности три раза.

Как убедиться, что кнопка добавляется только один раз?

{{}} из веб-фреймворка django и не имеет значения

      <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

Проверить наличие кнопки в строке 3

$(document).ready(function(){
    $('#openXML').on('click',function(event){
        if (!$('#+pk+').length) {
                // Your code
        }
    }
}

Answer 2

Поскольку идентификаторы должны быть уникальными, я бы посоветовал проверить, существует ли кнопка перед добавлением.Следовательно, вам нужно изменить эту строку:

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

на:

if ($("#loadAllTitles").find('#' + $.escapeSelector(pk + '/')).length == 0)
  $("#loadAllTitles").append(myButton)

Я получаю следующую консольную ошибку: Uncaught Error: синтаксическая ошибка, нераспознанное выражение: # /openGraph / 104 -

Если вы используете jQuery 3.x, вам нужно использовать:

jQuery.escapeSelector (): экранирует любой символ, который имеет особое значение вCSS-селектор.

ОБНОВЛЕНИЕ В то время как pk - это идентификатор, когда вы создаете новый элемент, который вы добавляете к этому идентификатору, окончательный / .Это ваша проблема.

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