Toastr：第一次单击按钮时不会应用 toast-top-center

Question

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

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

Answer 1

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

这就是第一个吐司在右上角的原因。

运行在你的函数结束时的吐司，它会起作用。

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

Answer 2

这是 1.22 版中的错误，请从 GitHub 下载当前版本。

Toastr Github Link

Toastr：第一次单击按钮时不会应用 toast-top-center

Toastr: toast-top-center doesn't get applied at the first click of the button

html

javascript

css

jquery

toastr