jQuery日期选择器无法在MVC4应用程序上工作
jQuery datepicker not working on MVC4 application
我正试图将jQuery日期选择器引入我的MVC4应用程序,但似乎无法获得启动日期选择器小部件的点击事件。在http://jqueryui.com/datepicker/他们给出了一个如何实现这一点的简单例子,当我在本地尝试时,它按预期工作,但在MVC4应用程序上什么都没有:
我的代码如下:
<script src="@Url.Content("~/Scripts/jquery-2.0.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#expirydate').datepicker();
});
</script>
<div class="nine columns bottom20">
<div class="row">
<h3>New Course details</h3>
@using(Html.BeginForm("NewCourse","Admin",FormMethod.Post))
{
<div class="row">
<div class="twelve columns" style="width:590px;">
<div class="row">
<div class="six columns">
<label for="name">Name:</label>
<input type="text" id="name" name="name" /><br />
</div>
<div class="six columns">
<label for="author">Author:</label>
<input type="text" id="author" name="author" /><br />
</div>
<div class="row">
<div class="twelve columns" style="width:590px; margin-left:5px;">
<label for="description">Description:</label>
<input type="text" id="description" name="description" /><br />
</div>
</div>
<div class="twelve columns" style="width:590px;">
<div class="row">
<div class="six columns">
<label for="participationpoints">Participation Points:</label>
<input type="text" id="participationpoints" name="participationpoints" /><br />
</div>
<div class="six columns">
<label for="expirydate">Expiry Date:</label>
<input type="text" id="expirydate" name="expirydate" /><br />
</div>
</div>
</div>
<div class="row">
<div class="six columns">
<input type="hidden" id="uploaddate" name="uploaddate" /><br />
</div>
</div>
</div>
</div>
</div>
<div class="twelve columns">
<input id="CourseSubmit" type="submit" value="Submit button" class="medium button bottom20"style="margin-left:210px; margin-top:-50px;" />
</div>
}
</div>
</div>
你知道这里发生了什么吗?
布局中的其他脚本如下:
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src= "@Url.Content("~/Scripts/meta-app.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/filedrag.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/footable.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/footable.sortable.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/footable.filter.js.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/footable.paginate.js")"></script>
我的捆绑包配置如下:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery.js",
"~/Scripts/foundation.min.js",
"~/Scripts/modernizr.foundation.min.js",
"~/Scripts/jquery{version}.js",
"~/Scripts/jquery.carouFredSel-6.0.3-packed.js",
"~/Scripts/jquery.touchSwipe.min.js",
"~/plugins/slider-revolution/jquery.thempunch.plugins.min.js",
"~/plugins/slider-revolution/jquery.thempunch.revolution.min.js",
"~/plugins/flexislider/jquery.flexslider.js",
"~/plugins/camera/scripts/camera.min.js",
"~/plugins/camera/scripts/jquery.easing.1.3.js",
"~/plugins/camera/scripts/jquery.mobile.customized.min.js",
"~/plugins/titan/js/jquery.titanlighbox.js",
"~/plugins/titan/js/prettify.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/footable.js",
"~/Scripts/footable.sortable.js",
"~/Scripts/footable.filter.js",
"~/Scripts/footable.paginate.js",
"~/Scripts/jquery-2.0.2.js",
"~/Scripts/jquery-ui-1.10.3.js",
"~/Scripts/jquery.validate.unobtrusive.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-1.10.3.js",
"~/Scripts/jquery-ui-{version}.js"));
您将呈现jQuery两次,一次在布局中,另一次在视图中。这可能是您所看到的问题的原因。
正确的代码:
$('#datepicker').datepicker();
检查你的css文件jqueryui。
jquery 中的选择器
#
=ID
.
=类
通过某种属性
$('a[href=www.google.com]')
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- Emberjs应用程序加载在除Index之外的所有路由上
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- angular 1.5应用程序中的导航栏
- 在Web应用程序中使用Highcharts javascript
- angularjs+rails应用程序中未显示模板
- 使用acess代币登录Facebook,并通过网络应用程序离线发布
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- 在phonegap应用程序内部重定向不起作用
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- Node.js正在更改应用程序以使用集群模块
- 如何加载/构建 Chrome 应用/扩展程序并以编程方式运行
- Chrome 应用/扩展程序 - 后台请求错误,或允许应用问题加载 Google 文档 API
- 检测我使用的是 chrome 应用/扩展程序