无法使JQuery在母版页中工作 [英] Can't get JQuery to work in Master Page
问题描述
我有一个没有主页的表单中的示例jquery，它工作正常.我试图在我的母版页中使用相同的功能，但是它不起作用，我使用的是ASP.NET.这是我的两个代码:
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:
WebForm(有效):
WebForm (This works):
<%@ 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(这不起作用):
MasterPage (This does NOT work):
<%@ 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>
推荐答案
问题是，当您添加母版页时，您会得到ClientID处理.
The problem is that when you add the MasterPage you get ClientID mangling.
$("#pBody") => $(".pBody")
您不能在MasterPage上使用ID，您将无法访问损坏的clientID.您需要在元素上有一个自定义的CSS类.
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.
当然，现在您期望使用该MasterPage的每个页面都有一个pBody. 最好将该代码保存在页面中，而不是母版页中.
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.
这篇关于无法使JQuery在母版页中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
