如果在Django中单击,如何使所有delete href标签与Java脚本一起使用

时间:2019-05-29 15:40:40

标签: javascript django django-models django-rest-framework django-templates

在删除注释之前,我已经为构想框编写了一个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 %}

1 个答案:

答案 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 % }