Javascript 由于页面重新加载，Sweetalert在出现后突然关闭

我正在使用javascript sweetalert对话框。由于页面重新加载，对话框出现后关闭。我已将建议的修复方法应用于解决问题

我的模板代码是

<button title="Transform" id="transform_btn" type="button" class="btn" style="color:white;background-color:#fff;">
 <a href="/load_to_hive/{{stu.cases_id}}/">
  <i class="glyphicon glyphicon-hourglass fa-2x"></i>
 </a>
</button>

显示对话框的javascript代码是

{% block javascript %}
<script src="{% static 'js/sweetalert.min.js' %}"></script>
<script>
var transformBtn= document.getElementById('transform_btn');
transformBtn.addEventListener("click",function(){
swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
});
})
</script>
{% endblock javascript %}

{%block javascript%}
var transformBtn=document.getElementById（'transform_btn'）；
transformBtn.addEventListener（“单击”，函数（）{
游泳({
标题：“干得好！”，
文本：“你点击了按钮！”，
图标：“成功”，
});
})
{%endblock javascript%}

编辑 我试图延迟显示警报，即页面已重新加载，但无法工作。我不知道为什么：

<script>
var transformBtn= document.getElementById('transform_btn');
  transformBtn.addEventListener("click",function(){
    setTimeout(function(){
    swal({
      title: "Good job!",
      text: "You clicked the button!",
      icon: "success",
    })
    },3000);
  })
  </script>

var transformBtn=document.getElementById（'transform_btn'）；
transformBtn.addEventListener（“单击”，函数（）{
setTimeout（函数（）{
游泳({
标题：“干得好！”，
文本：“你点击了按钮！”，
图标：“成功”，
})
},3000);
})

您的按钮中有一个链接。这里的问题很可能是您的页面在单击按钮后立即导航到新页面

作为旁注，我想不出任何情况下，你应该有一个锚标签内的按钮这样。或者只是有一个锚定标记，然后对其进行样式设置，使其看起来像一个按钮，或者只是有一个按钮。但肯定不是两者都有

有几种方法可以解决这个问题，最好的方法取决于你想发生什么。但是如果你想在点击按钮后导航到一个新的页面，我只会让你的甜蜜警报的确认按钮弹出一个链接。大概是这样的：

swal({
  title: "Good job!",
  text: "You clicked the button!",
  confirmButtonText: '<a href="/load_to_hive/{{stu.cases_id}}/">',
  icon: "success",
});

swal({
标题：“干得好！”，
文本：“你点击了按钮！”，
confirmButtonText:“”，
图标：“成功”，
});

其他方法是等待用户单击成功，然后使用javascript进行导航。这真的取决于你想要按钮做什么