JQuery不适用于带有Masterpage的aspx页面

本文关键字：aspx 页面 Masterpage 不适用 适用于 JQuery | 更新日期: 2023-09-27 18:23:35

我做了这个例子，它在普通的aspx网页上运行良好。我使用Visual Studio 2010。

头部：

<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#CheckBoxShowHide').click(function () {
            $("#ShowHideElement").slideToggle();
        });
    });
</script>
<style type="text/css">
    #ShowHideElement
    {
        width:400px;
        height:100px;
        background-color:Aqua;
    }
</style>

车身部分：

<form id="form1" runat="server">
    <asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
    <div id="ShowHideElement">
        This is the element for show/hide
    </div>
</form>

当我在子网页上有一个母版页和相同的代码时，JQuery就不起作用了。加载JQuery javascript文件失败。子页和母版页位于同一文件夹中。如果我把代码放在母版页上，它可以正常工作，但我也希望JQuery放在子版页上。请帮帮我。

JQuery不适用于带有Masterpage的aspx页面

我也看到了另一个问题，您试图根据复选框的服务器ID而不是ClientID获取复选框ID。一旦一个asp控件被呈现到客户端上，它的ID就会被更改。尝试以下代码：

<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=CheckBoxShowHide.ClientID%>').click(function () {
            $("#ShowHideElement").slideToggle();
        });
    });
</script>
<style type="text/css">
    #ShowHideElement
    {
        width:400px;
        height:100px;
        background-color:Aqua;
    }
</style>

车身部分：

<form id="form1" runat="server">
    <asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
    <div id="ShowHideElement">
        This is the element for show/hide
    </div>
</form>

以下行是我唯一更改的内容：

$('#<%=CheckBoxShowHide.ClientID%>').click(function () {

希望能有所帮助。

您确定您的页面正在加载jQuery吗？请在主页中使用绝对URL来引用jQuery库。

如果jQuery在您的母版页上，它将在您的子页上工作

主<head>

<head>
     <script type="text/javascript" src="js/jquery.js"></script>
</head>

子<head>

<head>
    <script type="text/javascript">
        $(document).ready(function () {
             //Do Child jQuery Stuff here....
        });
    </script>
<head>

如果您遇到问题，唯一需要检查的就是确保指向jquery文件的路径是正确的。（即也许应该是../js/jquery.js）

如果我建议的另一件事不起作用，使用这个来确保这不是问题：

对于您的母版页<head>:

<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

或者（如果你想托管它）

<head>
     <script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>

你的根在哪里。

您应该能够将指向JQuery库的链接放在主页面的HEAD部分。当页面运行时，它将为主页生成HTML内容，并在HEAD部分中添加链接，然后内容页面应该能够成为JQuery库的用户。我知道我们有一个问题，链接是如何完成的。也许可以尝试在主页的HEAD中链接如下：

<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>

"<%%>'是在页面加载时执行内联服务器端代码的一种方法，因此页面将在给定URL位置的情况下注入正确的src。

相关文章：