我使用百里香用于弹簧模板的模板。我将布局分为两个页面，一个用于容器布局，另一个是片段。当我从片段页面调用一个函数。我得到未捕获的ReferenceError $未定义错误。我已经在容器布局头中包含了jquery。这是我的容器布局：
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Layout</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"/>
<script type="application/javascript" th:href="@{/webjars/jquery/2.1.4/jquery.min.js}"/>
<script type="application/javascript" th:href="@{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}"/>
<link rel="stylesheet" th:href="@{/css/dashboard.css}"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" th:href="@{/}">Daily Report</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a th:href="@{/}">Dashboard</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Log out</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search..."/>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li th:classappend="${#httpServletRequest.getRequestURI() == '/' ? 'active':''}" style="cursor: pointer;"><a th:href="@{/}">Dashboard <span class="sr-only">(current)</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/daily' ? 'active':''}" ><a style="cursor: pointer;" th:href="@{/daily}">Daily Report</a></li>
<li><a style="cursor: pointer;" onclick="event.preventDefault(); document.getElementById('formlogout').submit();">Logout</a></li>
<form name="formlogout" th:action="@{/logout}" method="post" id="formlogout">
</form>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" layout:fragment="content">
</div>
</div>
</div>
<!-- th:remove="tag"-->
<div layout:fragment="custom-footer">
</div>
</body>
</html>
这是我的片段布局：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org"
layout:decorator="user/layout">
<!-- layout:decorate="~{user/layout}">-->
<!-- layout:decorator="user/layout">-->
<head>
<title>Daily Report</title>
<style>
.spanhead{
margin: -10px 0 20px;
border-bottom: 1px solid #eee;
}
.phead{
font-size: 35px;
margin-left: -30px;
}
.left{
margin-left: 30px;
margin-top: 15px;
}
#input_report{
display:none;
margin-bottom: 3px;
border-bottom: 1px solid #eee;
}
</style>
</head>
<body>
<div layout:fragment="content">
<span class="spanhead col-md-12">
<p class="phead col-md-10">Daily Report</p>
<button type="button" onclick="togleInput()" class="col-md-2 btn btn-default left">Input Report</button>
</span>
<div id="input_report">
<form class="form-inline" name="formreport" th:action="@{/daily}" method="post" id="formreport">
<div class="form-group">
<label for="tanggal">Tanggal : </label>
<input class="form-control" type="text" name="tanggal" id="tanggal" title="tanggal" />
</div>
<div class="form-group" style="margin-left:30px;">
<label for="uraian">Uraian : </label>
<input class="form-control" type="text" name="uraian" id="uraian" title="uraian" />
</div>
<button type="submit" class="btn btn-primary" style="margin-left:30px;">Submit</button>
</form>
</div>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Uraian</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>3/1/2017</td>
<td>Desain Mock Up Aplikasi</td>
</tr>
<tr>
<td>2</td>
<td>3/2/2017</td>
<td>Desain database Aplikasi</td>
</tr>
</tbody>
</table>
</div>
</div>
<div layout:fragment="custom-footer">
<script th:inline="javascript">
function togleInput()
{
$('#input_report').toggle();
}
console.log('hai');
</script>
</div>
</body>
</html>
当我单击片段布局中的按钮时。函数出错，因为$未定义。我刚接触春天和百里香，请帮我解决这个问题。
答案 0 :(得分：0)
您应该在</body>之前将所有脚本放在底部，这样页面加载速度更快，并尝试将您的函数放在$(document).ready(function () {中以确保没有任何事情以错误的顺序发生，您希望您的函数适用到文档就绪加载的页面上的元素
编辑：如果你要使用jquery，你必须在你的函数/脚本之前放置jquery，例如脚本中的“$”。