无法让JQuery在Master Page中工作

I have a sample jquery in a form with no master page, and it works fine. I am trying to use the same function inside my master page but it does not work, I am using ASP.NET. Here is my code for both:

我有一个没有母版页的表单中的示例jquery,它工作正常。我试图在我的母版页中使用相同的功能,但它不起作用,我使用ASP.NET。这是我的两个代码:

WebForm (This works):

WebForm(这是有效的):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="Surfitlocal.WebForm3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#pHeader').click(function() {
                $('#pBody').slideToggle('slow');
            });
        });
    </script>
    <style type="text/css">
        .cpHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS", Verdana;
            font-size: 12px;
            cursor: pointer;
            width:450px;
            height:18px;
            padding: 4px;           
        }
        .cpBody
        {
            background-color: #DCE4F9;
            font: normal 11px auto Verdana, Arial;
            border: 1px gray;               
            width:450px;
            padding: 4px;
            padding-top: 7px;
        }      
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
            <asp:Label ID="lblText" runat="server" />
        </asp:Panel>

        <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur
        </asp:Panel>
    </div>
    </form>
</body>
</html>

MasterPage (This does NOT work):

MasterPage(这不起作用):

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Biz.Master.cs" Inherits="Surfitlocal.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script> 
    <script type="text/javascript">
        $(document).ready(function() {
            $('#pHeader').click(function() {
                $('#pBody').slideToggle('slow');
            });
        });
    </script>     
    <style type="text/css">
        .cpHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS", Verdana;
            font-size: 12px;
            cursor: pointer;
            width:450px;
            height:18px;
            padding: 4px;           
        }
        .cpBody
        {
            background-color: #DCE4F9;
            font: normal 11px auto Verdana, Arial;
            border: 1px gray;               
            width:450px;
            padding: 4px;
            padding-top: 7px;
        }      
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
            <asp:Label ID="lblText" runat="server" />
        </asp:Panel>

        <asp:Panel ID="pBody" runat="server" CssClass="cpBody">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur
        </asp:Panel>    

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>


    </div>
    </form>
</body>
</html>

4 个解决方案

#1

The problem is that when you add the MasterPage you get ClientID mangling.

问题是,当您添加MasterPage时,您将获得ClientID修改。

$("#pBody")  =>   $(".pBody")

You can't use ID with the MasterPage, you wont have access to the mangled clientID. You need to have a custom css class on the element.

您不能将ID与MasterPage一起使用,您将无法访问受损的clientID。您需要在元素上有一个自定义的css类。

Of course, now you are expecting that every page that uses that MasterPage have a pBody. Better to keep that code in the page, not the master page.

当然,现在您期望使用该MasterPage的每个页面都有一个pBody。最好将代码保留在页面中,而不是母版页。

#2

I can see you are using CssClass but in your function you use "#" indicating its an ID.

我可以看到你正在使用CssClass,但在你的函数中你使用“#”表示它的ID。

Therefore

$('#pBody')

Should be

$(".pBody')

If you still want to use IDs, you should be using:

如果您仍想使用ID,则应该使用:

$("#<%= pBody.ClientID %>")

#3

Just try to put below these. It might help in Master page

试着把它们放在下面。它可能在Master页面中有所帮助

$(document.getElementById("<%=pHeader.ClientID%>")

$(document.getElementById("<%=pBody.ClientID%>")

#4

For solve this problem in asp.net you can use script manager:

要在asp.net中解决此问题,您可以使用脚本管理器:

<asp:ScriptManager ID="ScriptManager1" runat="server">
     <Scripts>
     //put your js file in script reference tag: 
     //<asp:ScriptReference Path="~/scripts/jquery-1.3.2.js" />
     //<asp:ScriptReference Path="~/scripts/PWDMenuMaker.js" />
    </Scripts>
</asp:ScriptManager>

//Movafagh bashid

#1