jQuery插件在ASP.NET MVC 4中不起作用
[英]jQuery Plugin not working in ASP.NET MVC 4
问题描述
The images which should be cycling are just sitting on top of each other. 
应该循环的图像只是彼此重叠。 Screenshot here 屏幕截图在这里
In my (very simple) application I have one View named Index.cshtml . 在我的应用程序（非常简单）中，我有一个名为Index.cshtml View 。 I'd like to use jquery Cycle Plugin for this page which I have used in my PHP apps too. 我想为此页面使用jquery Cycle Plugin ，我也在PHP应用程序中使用过。 Below is my _Layout.cshtml 's relevant code 以下是我的_Layout.cshtml的相关代码
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render(Url.Content("~/Scripts/cycle.js")) // I added this line.
@Scripts.Render("~/bundles/modernizr")
The plugin file (cycle.js) is in Scripts folder generated by Basic project layout. 插件文件(cycle.js)在Basic项目布局生成的Scripts文件夹中。 Below is how I am using it. 以下是我的使用方式。 The following code is also in _Layout.cshtml (comments only here). 以下代码也在_Layout.cshtml （仅在此处注释）。
<script type="text/javascript">
$(document).ready(function () {
alert('test1'); //this is 'alerted'
$('.images').cycle({
fx: 'fade',
speed: 2000
});
alert('test2!'); //this is NOT 'alerted'
});
</script>
When I view the source after requesting page in a browser, I get this : 在浏览器中请求页面后查看源代码时，得到以下信息：
<title>Asp.Net MVC 4 Hello World App</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/cycle.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert('test1');
$('.images').cycle({
fx: 'fade',
speed: 2000
});
alert('test12');
});
</script>
</head>
<body>
...
</html>
Here is the container for images: 这是图像的容器：
<div class="images" id="images">
<img src="@Url.Content("../Images/image1.jpg")" alt="page image" />
<img src="@Url.Content("../Images/image2.jpg")" alt="page image" />
<img src="@Url.Content("../Images/image3.jpg")" alt="page image" />
<img src="@Url.Content("../Images/image4.jpg")" alt="page image" />
</div>
The files are therefore successfully being loaded. 因此，文件已成功加载。 I believe the issue is how $(document).ready() works. 我认为问题在于$(document).ready()工作方式。 because whatever code I put before .cycle() works but nothing works after it. 因为无论我在.cycle()之前.cycle()什么代码都可以，但是之后没有任何效果。
3 个解决方案
解决方案1
2 已采纳 2012-10-20 11:11:22
I solved the problem after some (more) searching. 经过一些（更多）搜索后，我解决了问题。 Somehow jquery was being loaded twice. 不知何故，jquery被加载了两次。 Once before cycle plugin file and the other one after it. 循环插件文件之前有一个，循环插件文件之后有一个。 This link helped to catch the problem, specifically redndahead 's comment. 该链接有助于发现问题，特别是redndahead的评论。
I opened Firebug console and observed that indeed jQuery was being loaded twice. 我打开Firebug控制台，发现确实jQuery被加载了两次。 I removed the following line from _Layout.cshtml page under <body> tag and now the plugin is working fine. 我从<body>标记下的_Layout.cshtml页面中删除了以下行，现在该插件可以正常工作。
@Scripts.Render("~/bundles/jquery")
This SO quesiton is very helpful for those wondering what bundles are. 这样的问题对那些想知道bundles是什么的人非常有帮助。 Thanks to all for their response. 感谢所有人的回应。
解决方案2
0 2013-01-13 16:20:28
That might have several reasons but the most common solution in many cases is: carrying the 这可能有几个原因，但是在许多情况下，最常见的解决方案是：
@Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) @ Scripts.Render（“〜/ bundles / jquery”）@RenderSection（“ scripts”，必填：false）
if you know turkish you can check this article for more information 如果您知道土耳其语，可以查看此文章以获取更多信息
http://ogrenmeliyim.com/mvc-4-de-jquery-tanimlanmasi/ http://ogrenmeliyim.com/mvc-4-de-jquery-tanimlanmasi/
解决方案3
-1 2015-03-16 10:56:48
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("p").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p>When you click on this paragraph , it will hide.</p>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.