我有一个名为"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)
}
});
})
});
最佳答案
因为 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>
关于javascript - 如何避免在第二次调用后在 ajax 上追加重复项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54259728/