Question

我目前正在开发一个简单的Web项目。我有一个页面，页面的格式很简单，人们可以在其中输入姓名，生日和大学学历。我正在使用物化和jQuery。但这一直是一场噩梦，因为我无法正确地获得这两个日期（生日）。我总是会收到此错误：

Uncaught TypeError: $(...).pickadate is not a function

这是我的html：

$(function() {

  $(document).ready(function() {
    $('.datepicker').pickadate({
      selectMonths: true,
      selectYears: 20
    });
    $('select').material_select();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <link type="text/css" rel="stylesheet" href="/materialize/css/materialize.min.css" media="screen,projection" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <title>EscolAlura</title>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="/materialize/js/inicializar.js"></script>



</head>

<body class="grey lighten-3">
  <div id="formularioEdicao" class="container">
    <h3 class="main-title center">Cadastrar Aluno</h3>
    <div class="row">
      <form class="col s12" action="#" th:action="@{/aluno/salvar}" th:object="${aluno}" method="post">
        <div class="section">
          <h5>Dados Básicos</h5>
          <div class="row">
            <div class="input-field col s12">
              <input id="nome" type="text" th:field="*{nome}" />
              <label for="nome">Nome</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="dataNascimento" type="date" class="datepicker" th:field="*{dataNascimento}" />
              <label for="dataNascimento">Dt. Nascimento</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="curso" type="text" class="validate" th:field="*{curso.nome}" />
              <label for="curso">Curso</label>
            </div>
          </div>

        </div>
        <!-- Fim SECTION Dados Basicos -->

        <div class="row">
          <div class="input-field col s12 center">
            <button class="btn waves-effect waves-light" type="submit" name="action">Salvar Aluno</button>
          </div>
        </div>
      </form>
    </div>

  </div>
  <!-- Fim do formulario de edicao -->
  <script type="text/javascript" src="/materialize/js/materialize.js"></script>
</body>

</html>

My page in chrome

有人知道如何解决这个问题吗？谢谢

Answer 1

加载脚本的顺序非常重要。

在使用jQuery时，先从它开始，然后首先加载它。其他插件，然后是您的自定义JS文件。

见下文

$(document).ready(function() {

    $('.datepicker').pickadate({
        selectMonths: true, 
        selectYears: 20 
      });
      
    $('select').material_select();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />

<div id="formularioEdicao" class="container">
    <h3 class="main-title center">Cadastrar Aluno</h3>
    <div class="row">
        <form class="col s12" action="#" th:action="@{/aluno/salvar}" th:object="${aluno}" method="post">
            <div class="section">
                <h5>Dados Básicos</h5>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="nome" type="text" th:field="*{nome}" />
                        <label for="nome">Nome</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="dataNascimento" type="date" class="datepicker" th:field="*{dataNascimento}"/>
                        <label for="dataNascimento">Dt. Nascimento</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="curso" type="text" class="validate" th:field="*{curso.nome}"  />
                        <label for="curso">Curso</label>
                    </div>
                </div>

            </div> <!-- Fim SECTION Dados Basicos -->

            <div class="row">
                <div class="input-field col s12 center">
                    <button class="btn waves-effect waves-light" type="submit" name="action">Salvar Aluno</button>
                </div>
            </div>
        </form>
    </div>

</div>

未捕获的TypeError：$（...）。pickadate不是函数

1 个答案: