JQuery未正确呈现
JQuery未正确呈现
提问于 2017-10-09 17:13:25
目前，我有一个jquery函数来显示时间(我使用的jquery是这里找到的基本示例：http://jonthornton.github.io/jquery-timepicker/)。当我实现Thornton先生的时间选择器时，我可以单击输入字段，时间选项列表就会下降，但是在下拉列表的一侧没有滚动条/滑块(如他的示例中所示)。我选择的时间值(我可以使用鼠标滚动器在所选内容中上下移动)可以插入到我的SQL db (通过$_POST)中，没有任何问题，但是，我希望能够使用桑顿网站上列出的其他一些jquery示例--但是，这些示例(除了基本示例--似乎只是部分工作的示例除外)都不起作用。附件是相关的代码。如有任何意见，将不胜感激。此外，我试着阅读本教程(https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery)，因此我尝试添加脚本(注意: 10/9/17 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js)，但这似乎没有任何效果。
<?php
//DOCTYPE begins header.html
include_once("includes/header.html");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style media="screen"></style>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crime Stoppers</title>
<!--added 10/9/17-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="js/scripts.js"></script>-->
<!--Austin's Original links and scripts-->
<link rel="stylesheet" type="text/css" href="./styles/styles.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.min.css"/>
<link rel="stylesheet" href="./jquery/timepicker/jquery.timepicker.css"/>
<script type="text/javascript" src="./jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="./jquery/timepicker/jquery.timepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#basicExample').timepicker();
// $('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
// $('#setTimeExample').timepicker();
// $('#setTimeButton').on('click', function (){
// $('#setTimeExample').timepicker('setTime', new Date());
// });
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header"/></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-09 18:03:35
下面的代码为我显示滚动条，并启用基本时间选择器，以及设置日期示例。这不是每一个例子，但会让你在路上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crime Stoppers</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#basicExample').timepicker();
$('#setTimeButton').on('click', function () {
$('#basicExample').timepicker('setTime', new Date());
})
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header" /></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
<button id="setTimeButton">Set current time</button>
</div>
</body>
</html>
Stack Overflow用户
发布于 2017-10-09 18:08:45
您的问题可能是在文档完全加载之前调用JavaScript函数。
$(function() {
$(document).ready(function() {
// Your code here
}
});只有在文档准备就绪时才使用JavaScript始终是最佳实践(即.a)。document.onload事件)，代之以jQuery的$(document).ready()事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46651686
复制相关文章
相似问题
腾讯云开发者
