查询 SweetAlert 简单消息框

Question

我是 jQuery 的新手，也是 Sweet alert 的新手，我看到了使用 sweet alert 的基本警报，并尝试在我的代码中这样做，但它不起作用。谁能告诉我为什么它不起作用...

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="sweetalert-master/dist/sweetalert.min.js"></script>
        <link rel="sweetalert-master/dist/sweetalert.css">
    </head>
    <body>      
        <script>
        $('.show-alert').on('click', function ()
        {
            sweetAlert('Replace Default Alerts');
        });
        </script>
        <a href="#" class="show-alert">Show Alert</a>

    </body>
</html>

提前致谢！！！

Answer 1

您的代码中的兴趣点是：

SweetAlert 包含路径的路径可能有误。您可以使用：

https://rawgit.com/t4t5/sweetalert/master/dist/sweetalert.min.js

或

https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js

必须在文件就绪时调用sweetAlert（参考：document ready）否则dom元素还没有准备好使用

所以片段是：

$(function () {
  $('.show-alert').on('click', function(e) {
    e.preventDefault();
    sweetAlert('Replace Default Alerts');
  });
});

<link rel="stylesheet" href="https://rawgit.com/t4t5/sweetalert/master/dist/sweetalert.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://rawgit.com/t4t5/sweetalert/master/dist/sweetalert.min.js"></script>


<a href="#" class="show-alert">Show Alert</a>

查询 SweetAlert 简单消息框

Query on SweetAlert Simple message box

jquery

sweetalert