无法使JQuery在母版页中工作

Question

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

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>

母版页（这不起作用）：

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

Answer 1

问题是，当您添加母版页时，您会获得ClientID处理。

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

您不能在MasterPage中使用ID，您将无法访问已损坏的clientID。 您需要在元素上具有自定义的CSS类。

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

Answer 2

我可以看到您正在使用CssClass但在函数中使用“＃”表示其ID。

因此

$('#pBody')

应该

$(".pBody')

如果仍要使用ID，则应使用：

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

Answer 3

只需尝试将其放在下面。 在母版页中可能会有所帮助

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

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

Answer 4

为了在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

无法使JQuery在母版页中工作

问题描述

4 个解决方案

解决方案1
4 2009-05-08 21:50:37

解决方案2
3 2009-05-08 21:51:09

解决方案3
0 2013-05-01 05:48:38

解决方案4
-1 2010-08-17 20:31:23

无法使JQuery在母版页中工作

问题描述

4 个解决方案

解决方案1 4 2009-05-08 21:50:37

解决方案2 3 2009-05-08 21:51:09

解决方案3 0 2013-05-01 05:48:38

解决方案4 -1 2010-08-17 20:31:23

解决方案1
4 2009-05-08 21:50:37

解决方案2
3 2009-05-08 21:51:09

解决方案3
0 2013-05-01 05:48:38

解决方案4
-1 2010-08-17 20:31:23