物化吐司正在渲染空JS答案

【问题标题】：Materialize toast is rendering empty JS物化吐司正在渲染空JS
【发布时间】：2020-07-31 20:49:33
【问题描述】：

我正在使用 Materialize（最新版本）并尝试使用按钮创建 Toast，它们显示但为空！

这是代码，还有一个 codepen 链接：https://codepen.io/jvelezr/pen/xxZvqEP

$(document).ready(function() {
            $("#button-action").on("click", function() {
        
            toastContent = 'This is a test + &nbsp;<span><button class="btn-flat toast-action">DESHACER</button></span>';
            M.toast(toastContent, 15000);
          });
});

谢谢！

【问题讨论】：

标签： javascript jquery materialize toast

【解决方案1】：

根据Materialize Toast documentation，该函数接受具有html 和displayLength 属性的选项对象。所以你的例子应该是这样的：

$(document).ready(function() {
  $("#button-action").on("click", function() {
    const toastOptions = {
      html: 'This is a test + &nbsp;<span><button class="btn-flat toast-action">DESHACER</button></span>',
      displayLength: 15000
    };
    M.toast(toastOptions);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn" id="button-action">Test Me!</div>

【讨论】：