Home / Questions / 272611
Accepted
josanangel
Asked: 2020-06-18 04:14:12 +0800 CST 2020-06-18 04:14:12 +0800 CST

JQuery Toast 消息有问题，它不显示消息

  • 772

我正在尝试在我的网页上实现通知系统，为此我正在使用以下插件。

我做的第一件事是下载插件，并将其插入到我的目录中： ../static/notificaciones如下图所示：

我的网站目录的图像

如您所见，dir父亲是WIKI FAMILY。

我更改了.zip插件的名称（称为通知），以便导入它会更舒服。

好吧，为了做一个测试，我testing.php在这个目录中创建了一个： WIKI FAMILIA/testing.php，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

    <!-- TOASTR.CSS DEL PLUGIN -->
    <link href="static/notificaciones/toastr.css" rel="stylesheet">
    <script src="static/notificaciones/toastr.js"></script>

</head>
<body>


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Testing</h1>
                <button id="miBoton" class="btn btn-info" click>Float message</button>
            </div>
        </div>
    </div>




    <script
                  src="https://code.jquery.com/jquery-3.4.1.js"
                  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
                  crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script
                  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
                  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
                  crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


    <script>
        $("#miBoton").click(function() {

            toastr.warning('Warning');


        });
    </script>

</body>
</html>

我不得不这样做，因为它对我不起作用，我试图找出原因。在这个文件testing.php中，我所做的只是创建一个按钮并在以最简单的方式按下它时显示烤面包机警告，因为它不适合我。我不知道为什么。有没有人遇到过类似的问题？

jquery

1 Answers

  1. Best Answer

    我举了一个处理插件的简单例子。我在您的代码中看到的问题是库的加载顺序。该插件toastr需要首先加载库Jquery才能进行初始化，在您的情况下，您首先从加载JStoastr，然后从Jquery加载。

    您可能遇到的另一个问题是您没有正确引用您拥有插件的目录的位置。

    <html>
<body>
  <a id='linkButton'>ClickMe</a>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    toastr.options.timeOut = 1500; // 1.5s
    toastr.info('Page Loaded!');
    $('#linkButton').click(function() {
       toastr.success('Click Button');
    });
  });
  </script>
</body>
</html>

    参考： 例子

    问题中的代码示例

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Testing</h1>
          <button id="miBoton" class="btn btn-info" click>Float message</button>
        </div>
      </div>
    </div>
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>    

    <script>
      $("#miBoton").click(function() {
        toastr.warning('Warning');
      });
    </script>

  </body>
</html>

    • 3