C# JQuery don’；不能在带有母版页的aspx页面中工作

我已经做了这个例子，它在一个普通的aspx网页上运行良好。我使用VisualStudio2010

头部：

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

显示/隐藏元素
$（文档）.ready（函数（）{
$（'#CheckBoxShowHide'）。单击（函数（）{
$（“#ShowHideElement”）.slideToggle（）；
});
});
#显示隐藏元素
{
宽度：400px；
高度：100px；
背景色：浅绿色；
}

身体部位：

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

<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在您的母版页上，它将在您的子页上工作。 母版

子

$（文档）.ready（函数（）{
//在这里执行子jQuery操作。。。。
});

如果您有问题，唯一需要检查的是确保jquery文件的路径正确。（即可能应该是../js/jquery.js）

如果我建议的其他方法不起作用，请使用此选项确保这不是问题：

对于母版页

：

或者（如果你想主持）

其中~/是您的根。

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

子

$（文档）.ready（函数（）{
//在这里执行子jQuery操作。。。。
});

如果您有问题，唯一需要检查的是确保jquery文件的路径正确。（即可能应该是../js/jquery.js）

如果我建议的其他方法不起作用，请使用此选项确保这不是问题：

对于母版页

：

或者（如果你想主持）

---

其中~/是你的根。

你确定你的页面正在加载jQuery，请在母版页中使用绝对URL引用jQuery库。

你确定你的页面正在加载jQuery，在母版页中使用绝对URL引用jQuery库。

您应该能够将指向jQuery库的链接放在母版页的标题部分。当页面运行时，它将为母版页生成HTML内容，并在HEAD部分提供链接，内容页应该能够成为JQuery库的用户。我知道我们对链接的实现方式存在问题。也许可以尝试在母版页的页眉处链接，如下所示：

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

---

“”是一种在页面加载时执行内联服务器端代码的方法，因此页面将在给定URL位置的情况下插入正确的src

您应该能够将JQuery库的链接放在母版页的HEAD部分。当页面运行时，它将为母版页生成HTML内容，并在HEAD部分提供链接，内容页应该能够成为JQuery库的用户。我知道我们对链接的实现方式存在问题。也许可以尝试在母版页的页眉处链接，如下所示：

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

---

“”是一种在页面加载时执行内联服务器端代码的方法，因此页面将在给定URL位置的情况下插入正确的src

我还看到了另一个问题，您正试图根据其服务器ID而不是客户端ID获取复选框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>

显示/隐藏元素
$（文档）.ready（函数（）{
$（'#'）。单击（函数（）{
$（“#ShowHideElement”）.slideToggle（）；
});
});
#显示隐藏元素
{
宽度：400px；
高度：100px；
背景色：浅绿色；
}

身体部位：

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

<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 () {

$（'#'）。单击（函数（）{

---

希望有帮助。

我也看到了另一个问题，您正在尝试根据其服务器ID而不是客户端ID获取复选框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>

显示/隐藏元素
$（文档）.ready（函数（）{
$（'#'）。单击（函数（）{
$（“#ShowHideElement”）.slideToggle（）；
});
});
#显示隐藏元素
{
宽度：400px；
高度：100px；
背景色：浅绿色；
}

身体部位：

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

<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 () {

$（'#'）。单击（函数（）{

---

希望有帮助。

+1如果你最终将其放入一个外部文件，你会想使用

$（'[id*=“CheckBoxShowHide”]'）

+1如果你最终将其放入一个外部文件，如果你不想使用“ResolveURL”，你会想使用

$（'[id*=“CheckBoxShowHide”]'）

JBausmer发布的技巧，至少使用

/js/jquery.js

-这将默认浏览器查看js目录的站点根目录。如果您不想使用JBausmer发布的“ResolveURL”技巧，至少使用

/js/jquery.js

-这将默认浏览器查看js目录的站点根目录。