将jquery引用移动到asp.net母版页时出现java脚本错误

时间:2013-09-25 14:27:08

标签: c# javascript jquery asp.net visual-studio-2010

我使用jquery,我看到目前,Jquery在每个内容页面都有一个引用。 我打算将所有引用移动到母版页,以便在需要时更新它们。

因此,我从内容页面中删除了jquery引用,并将它们放在母版页的head部分中,如下所示:

<head id="Head1" runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link href="App_Themes/masterStyleSheet.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"

    <asp:ContentPlaceHolder ID="ExtraHeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

运行应用程序时出现以下错误:

JavaScript runtime error: 'jQuery' is undefined

从我的在线研究中,这是正确的方法..但我得到了错误。任何人都可以帮助我,并指出什么是错的或需要做什么?

3 个答案:

答案 0 :(得分:4)

将jquery脚本标记移动到jquery ui脚本标记上方并删除其中一个jquery ui引用,因为您不需要包含它们两次:

<head id="Head1" runat="server">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <link href="App_Themes/masterStyleSheet.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"

    <asp:ContentPlaceHolder ID="ExtraHeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

jQuery未定义,因为jquery ui库在jquery-1.9.1.js文件中定义之前尝试使用jQuery引用。

答案 1 :(得分:1)

首先,更改调用jQuery UI和jQuery库的顺序,所有使用jQuery的库或插件都需要在调用之前定义jQuery,这适用于所有库或框架:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

然后你可以在你的代码中看到你正在调用两次jQuery UI,检查这个,以及你是否调用了两次jQuery或其他库:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
http://code.jquery.com/ui/1.10.3/jquery-ui.js

答案 2 :(得分:0)

你在加载jQuery库之前调用jQuery ui库

你的代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

将其更改为

首先调用jQuery库文件

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
相关问题