JQuery在使用母版页的aspx页面中不起作用

时间:2012-02-07 22:52:09

标签: c# javascript jquery asp.net master-pages

我已经做了这个例子,它在普通的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。请帮帮我。

4 个答案:

答案 0 :(得分:2)

我也可以看到另一个问题,你试图根据其服务器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 () {

希望它有所帮助。

答案 1 :(得分:1)

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

在哪里〜/是你的根。

答案 2 :(得分:1)

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

答案 3 :(得分:0)

您应该只能将链接放在母版页的HEAD部分中的JQuery库中。当页面运行时,它将生成主页面的HTML内容以及HEAD部分中的链接,内容页面应该能够使用户成为JQuery库的用户。我知道我们在链接如何完成方面遇到了问题。也许尝试在这样的主页的HEAD中链接:

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

&#39;&lt; %%&gt;&#39;是一种在页面加载时执行内联服务器端代码的方法,因此页面将根据URL的位置注入正确的src。