Toastr：第一次单击按钮时未应用 toast-top-center答案

【问题标题】：Toastr: toast-top-center doesn't get applied at the first click of the buttonToastr：第一次单击按钮时未应用 toast-top-center
【发布时间】：2016-07-21 11:14:30
【问题描述】：

当我单击按钮时，消息会显示在右上角。只有经过一两次尝试，它才会位于顶部中心。但是在提交表单时，它应该在第一次点击时出现在顶部中心。谁能告诉我为什么会这样以及如何纠正？我已经在下面包含了代码 sn-p。

<!DOCTYPE html>
<html>
<head>
<script
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet"
 href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>
<body>

<p>toast-top-center</p>

<button onclick="myFunction()">Click Here</button>

<p id="demo"></p>

<script>
function myFunction() {
   Command: toastr["error"]
           ("I'm not in the top-center!")

         toastr.options = {
          "closeButton" : false,
          "debug" : false,
          "newestOnTop" : false,
          "progressBar" : false,
          "positionClass" : "toast-top-center",
          "preventDuplicates" : false,
          "onclick" : null,
          "showDuration" : "300",
          "hideDuration" : "1000",
          "timeOut" : "5000",
          "extendedTimeOut" : "1000",
          "showEasing" : "swing",
          "hideEasing" : "linear",
          "showMethod" : "fadeIn",
          "hideMethod" : "fadeOut"
         }
}
</script>

</body>
</html>

【问题讨论】：

标签： javascript jquery html css toastr

【解决方案1】：

我认为错误是因为您在阅读选项之前运行了 toast。

这就是为什么第一个吐司在右上角。

在函数结束时运行 toast，它会起作用。

<!DOCTYPE html>
<html>
<head>
<script
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet"
 href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>
<body>

<p>toast-top-center</p>

<button onclick="myFunction()">Click Here</button>

<p id="demo"></p>

<script>
function myFunction() {

         toastr.options = {
          "positionClass" : "toast-top-center",
          "closeButton" : false,
          "debug" : false,
          "newestOnTop" : false,
          "progressBar" : false,
          "preventDuplicates" : false,
          "onclick" : null,
          "showDuration" : "300",
          "hideDuration" : "1000",
          "timeOut" : "5000",
          "extendedTimeOut" : "1000",
          "showEasing" : "swing",
          "hideEasing" : "linear",
          "showMethod" : "fadeIn",
          "hideMethod" : "fadeOut"
         }
   Command: toastr["success"]
           ("I'm in the top-center!")

}
</script>

</body>
</html>

【讨论】：

【解决方案2】：

这是 1.22 版的一个错误，只需从 GitHub 下载当前版本即可。

Toastr Github Link

【讨论】：