JQuery的不与母版的aspx页工作 [英] JQuery don’t work in aspx-page with Masterpage

问题描述

我做这个例子，它工作正常上一个普通的ASPX网页。我使用Visual Studio 2010。

I have made this example and it works fine on a plain aspx webpage. I use 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 dosent工作同code。 javascript文件失败的JQuery的加载。孩子页面和母版在同一个文件夹中。如果我把code对母版，它工作正常，但我想JQuery的孩子页面上了。请帮我。

When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.

推荐答案

我可以看到另一个问题，以及，你正在试图抓住基于它的服务器ID没有客户端ID的复选框ID。一旦一个ASP的控制已经呈现到客户端的ID得到改变。请尝试以下code：

I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:

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

下面的线是我改变的唯一的事：

The following line is the only thing I changed:

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

希望它帮助。

这篇关于JQuery的不与母版的aspx页工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！