Question

我正在尝试在Grafana中编写HTML面板。

我在该面板中有以下代码（页面由不同类型的面板组成，其中一种类型是HTML）：

<html lang="en">
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <style>
      .input-field.col .dropdown-content [type="checkbox"]+label {
        top: -10px;
      }
      .caret {
        border-color: transparent !important;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class='input-field col s6'>
          <select class='multiselect' multiple>
            <option value="" disabled selected>Datacenter</option>
            <option value="rs-iad">rs-iad</option>
            <option value="rs-lhr">rs-lhr</option>
            <option value="rs-ord">rs-ord</option>
            <option value="unknown">unknown</option>
          </select>
        </div>
      </div>
    </div>
    <!-- Latest compiled JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
      <script type="text/javascript">
          $('.multiselect').material_select();
      </script>
  </body>
</html>

这存储在一个脚本化的JS面板中（例如can be seen here） - 当我导航到这个脚本页面时，我首先在控制台中获得异常：

TypeError: $(…).material_select is not a function

但是，如果我单击编辑并转到面板的HTML内容，修改HTML的单个字符，一切都神奇地渲染得很好。我怎么能绕过这个？我一般都不擅长网络开发，所以如果我在HTML内容中做了一些完全错误的事情，请道歉。

我尝试将material_select()包裹在$(document).ready()中，但这会产生相同的结果。

我知道这对Grafana有点具体，但我似乎无法从他们的官方论坛得到任何回复，所以希望有人可以帮助引导我。

样式方法在页面加载时不可用，但是在我在页面上进行操作之后

0 个答案: