在删除注释之前,我已经为构想框编写了一个Java脚本。如果用户单击删除,它将弹出用于删除确认的框。如果我有相同用户的一系列注释,则当我循环打印注释时,java脚本逻辑将停留在第一个删除注释本身之前,直到我删除它为止。如果我拒绝,并尝试删除第二条注释,则Java脚本逻辑不起作用。谁能帮我解决这个问题。我是否需要将Java脚本逻辑放置在代码中的其他位置。可以识别吗?
<div class="container">
<h2 class="text-center">User Comments</h2>
{% for comment in comments%}
<p class="text-secondary text-center">{{ comment.created }}</p>
<p> {{ comment.body }} </p>
{% if comment.user == request.user.username %}
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'comment-update' comment.id %}">Update Comment</a>
<a class="btn btn-danger btn-sm mt-1 mb-1" id="delete-object" >Delete Comment
<script type="text/javascript">
document.getElementById("delete-object").onclick = function(){
if (confirm('Delete the comment')){
alert('hi');
#Link to delete comment}}
</script>
{% endif %}
答案 0 :(得分:0)
您正在将相同的id
分配给多个a
标签。 id
在文档中必须是唯一的。
尝试类似的东西
<div class="container">
<h2 class="text-center">User Comments</h2>
{% for comment in comments%}
<p class="text-secondary text-center">{{ comment.created }}</p>
<p> {{ comment.body }} </p>
{% if comment.user == request.user.username %}
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'comment-update' comment.id %}">Update Comment</a>
<a class="btn btn-danger btn-sm mt-1 mb-1" data-action="delete-object" >Delete Comment
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
deleteLinks = document.querySelectorAll('[data-action="delete-object"]')
deleteLinks.forEach(link => {
link.addEventListener('click', function() {
if (confirm('Delete the comment')) {
alert('hi')
# link to the comment
}
})
})
})
</script>
{% endif %}
{% endfor % }