Django - Javascript 在模板中不起作用
Posted
技术标签:
【中文标题】Django - Javascript 在模板中不起作用【英文标题】：Django - Javascript not working in templates 【发布时间】：2017-12-27 02:43:40 【问题描述】：我正在尝试根据用户选择显示输入字段。学习***，我写了如下代码：
<form action="/register/" method="post" enctype="multipart/form-data">% csrf_token %
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>
<script type="text/javascript">
$('#designation').on('change',function()
if( $(this).val()==="student")
$("#students").show()
else
$("#students").hide()
);
</script>
代码在https://jsfiddle.net/ 中确实有效。但是，当我尝试在我的 django 模板中使用它时，它不起作用。（即，在选择“学生”时没有出现）。我的 base.html 中也包含以下内容。
<script src="% static 'jquery-3.2.1.min.js' %"></script>
<script src="% static 'js/bootstrap.min.js' %" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
更新： base.html: hideshow.js 是脚本。
<!DOCTYPE html>
% load staticfiles %
% load static %
<html lang="en"
xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<link href="% static 'css/bootstrap-dist.min.css' %" rel="stylesheet">
<link href="% static 'css/ie10-viewport-bug-workaround.css' %" rel="stylesheet">
<script src="% static 'JS/html5shiv.min.js' %"></script>
<script src="% static 'JS/respond.min.js' %"></script>
<script src="% static 'JS/hideshow.js' %"></script>
<link href="% static 'css/carousel.css' %" rel="stylesheet">
<link rel="stylesheet" href="% static 'css/bootstrap.min.css' %" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="% static 'css/bootstrap-theme.min.css' %" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="% static 'css/sampleLogin.css' %" />
</head>
<body>
% include "messages_display.html" %
<br />
% include "navbar.html" %
% block content %
% endblock %
register.html：
% extends "base.html" %
% load crispy_forms_tags %
% block content %
<div class="container">
<div class="col-md-12">
<div class="col-sm-7 col-sm-offset-2">
<h1> title </h1><br />
<form action="/register/" method="post" enctype="multipart/form-data">% csrf_token %
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>
% endblock content %
请帮忙。
【问题讨论】：
您遇到的错误是什么？ 请将代码写在文档就绪块上，希望对你有用。 此代码有效。请包含对无效内容的完整说明。 @Nathan P, Bharat soni, Hassam Imam，我试图描述这个问题。 嗨@surajitM 我也面临这个问题你有什么解决方案吗？ 【参考方案1】：首先你必须在 html 文件中包含 jquery.min.js 文件。然后你必须把js代码保存在$(document).ready(function()中。然后你的代码就可以工作了
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$('#designation').on('change',function()
console.log($(this).val());
if( $(this).val()==="student")
$("#students").show()
else
$("#students").hide()
);
);
</script>
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
【讨论】：
尝试了你的方式。包括 jquery.min.js 和 base.html 中的脚本。将 base.html 扩展为当前的 html。仍然没有喜悦，我不知道如何解决这个问题。 :( 你在使用 django 框架吗？或者你在哪个框架下工作？ 使用 django 1.11 没有错误。刚改成“学生”，上传文件没有出现。 那么我猜想扩展 html 文件或脚本时出了点问题。或者您可以在单独的 js 文件中编写脚本并将该 js 文件包含在当前 html 文件中。并且您的 html 代码应该在同一个当前 html 文件中。以上是关于Django - Javascript 在模板中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
JQuery 在 Django 自定义模板标签的模板中不起作用
谷歌地图在 App Engine 开发服务器上的 Django 模板中不起作用