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

Question

我正在使用 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 %}

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

<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>

Answer 1

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

附带说明一下，我想不出在任何情况下您都应该在这样的按钮内放置锚标记。要么只有一个锚标记，然后将其设置为看起来像一个按钮，要么只有一个按钮。但绝对不是两者。

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

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

其他方法是等待用户点击成功并使用 javascript 导航。这实际上取决于您希望按钮执行的操作。

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

Sweetalert closes suddenly after appearing because of page reload

javascript

sweetalert