jQuery插件在ASP.NET MVC 4中不起作用

Question

應該循環的圖像只是彼此重疊。 屏幕截圖在這里

在我的應用程序（非常簡單）中，我有一個名為Index.cshtml View 。 我想為此頁面使用jquery Cycle Plugin ，我也在PHP應用程序中使用過。 以下是我的_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")

插件文件(cycle.js)在Basic項目布局生成的Scripts文件夾中。 以下是我的使用方式。 以下代碼也在_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>

在瀏覽器中請求頁面后查看源代碼時，得到以下信息：

<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>

這是圖像的容器：

        <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>

因此，文件已成功加載。 我認為問題在於$(document).ready()工作方式。 因為無論我在.cycle()之前.cycle()什么代碼都可以，但是之后沒有任何效果。

Answer 1

經過一些（更多）搜索后，我解決了問題。 不知何故，jquery被加載了兩次。 循環插件文件之前有一個，循環插件文件之后有一個。 該鏈接有助於發現問題，特別是redndahead的評論。

我打開Firebug控制台，發現確實jQuery被加載了兩次。 我從<body>標記下的_Layout.cshtml頁面中刪除了以下行，現在該插件可以正常工作。

 @Scripts.Render("~/bundles/jquery")

這樣的問題對那些想知道bundles是什么的人非常有幫助。 感謝所有人的回應。

Answer 2

這可能有幾個原因，但是在許多情況下，最常見的解決方案是：

@ Scripts.Render（“〜/ bundles / jquery”）@RenderSection（“ scripts”，必填：false）

如果您知道土耳其語，可以查看此文章以獲取更多信息

http://ogrenmeliyim.com/mvc-4-de-jquery-tanimlanmasi/

Answer 3

<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>

jQuery插件在ASP.NET MVC 4中不起作用

問題描述

3 個解決方案

解決方案1
2 已采納 2012-10-20 11:11:22

解決方案2
0 2013-01-13 16:20:28

解決方案3
-1 2015-03-16 10:56:48

jQuery插件在ASP.NET MVC 4中不起作用

問題描述

3 個解決方案

解決方案1 2 已采納 2012-10-20 11:11:22

解決方案2 0 2013-01-13 16:20:28

解決方案3 -1 2015-03-16 10:56:48

解決方案1
2 已采納 2012-10-20 11:11:22

解決方案2
0 2013-01-13 16:20:28

解決方案3
-1 2015-03-16 10:56:48