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

Question

我有一个名为"file"的按钮，它是一个下拉菜单，还有另一个名为“打开”的按钮。用户单击打开后，我有一个 ajax GET 请求，该请求在每次调用后附加一个按钮。

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

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

{{}} 来自 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)

I get the following console error: Uncaught Error: Syntax error, unrecognized expression: #/openGraph/104 –

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

jQuery.escapeSelector(): Escapes any character that has a special meaning in a CSS selector.

更新虽然 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>