在母版中使用Jquery遇到问题
假设我想在母版页中控制两个Div的显隐,代码如下:<script type="text/javascript">
$(function()
{
$("#changeform1").click(function()
{
$("#tips").text("注册新账号...");
$("#subform2").show();
$("#subform1").hide();
});
$("#changeform2").click(function()
{
$("#tips").text("登录到网站...");
$("#subform1").show();
$("#subform2").hide();
});
});
</script>
这两个div是放在Master页里面的,如果把上面这段JS代码同样加在Master页里面,执行就会失败。但如果把这段代码写在子页面的Content里面,哪怕这个子页的Content里只有这段JS,却可以正常控制Master页里面的这两个Div显隐……我也试过同时在Master页和子页里面都写这段代码,然后翻看IE的源代码,是一模一样的,但仍然是写在子页里的才能生效。难道在母版页面里面使用Jquery会失效?
我认为不涉及ID的问题,因为既然能在子页面里面成功让母版页面里面的DIV执行,就证明能找得到ID。而且这个不是Server控件,ID不会被更改的。同理应该也不是调用的Jquery库的路径问题吧? --------------------编程问答-------------------- 母版页中不执行事件 --------------------编程问答-------------------- 不要在设计页面上乱丢jaavscript代码。注册脚本代码,使用 RegisterStartupScript。 --------------------编程问答-------------------- 当然你也可以使用 RegisterClientScriptInclude,或者你也可以(把它放到资源文件中然后)使用RegisterClientScriptResource。总之这些是跟你的aspx、ascx、master page之类的设计代码相分离的,其操作更加简单一致,有了任何问题你也好根据其机制去更加直接地找出问题。 --------------------编程问答--------------------
看你是放在母版页的顶部还是尾部了,总之要放在changeform1\tips\subform2...这后,因为要先有以上对象,才能执行,所以一般我们都会放到body onload="xxx()",要不就直接放到版尾 --------------------编程问答--------------------
--------------------编程问答--------------------
<script type="text/javascript">
$(document).ready(function () {
$('#changeform1').bind('click', function () {
$("#tips").text("注册新账号...");
$("#subform2").show();
$("#subform1").hide();
});
$('#changeform2').bind('click', function () {
$("#tips").text("登录到网站...");
$("#subform1").show();
$("#subform2").hide();
});
});
</script>
修改完毕,放到哪里都行,前提是你的div不是runat=server的
我都习惯把它放在最尾部的。 --------------------编程问答--------------------
感谢,但还是不行哦。我贴个简易代码上来看看
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="~/cs/aa.master.cs" Inherits="aa" %>--------------------编程问答-------------------- 我也遇到类似问题了,mvc的母板页中,搞死都运行不了jquey代码,连alert(“Hello!”),都不行,晕死 --------------------编程问答-------------------- 我也遇到类似问题了,mvc的母板页中,搞死都运行不了jquey代码,连alert(“Hello!”),都不行,晕死 --------------------编程问答-------------------- 我也遇到类似问题了,mvc的母板页中,搞死都运行不了jquey代码,连alert(“Hello!”),都不行,晕死
<!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" id="sc" runat="server">
<head id="Head1" runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="shortcut icon" href="<%= Page.ResolveClientUrl("~/weblogo.ico") %>" />
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/js/jquery-1.3.min.js") %>"></script>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/js/jquery.scrollTop.js") %>"></script>
<link rel="stylesheet" type="text/css" href="<%= Page.ResolveClientUrl("~/css-b/nav-1.css") %>" />
<link rel="stylesheet" type="text/css" href="<%= Page.ResolveClientUrl("~/css-b/index.css") %>" />
<link rel="stylesheet" type="text/css" href="<%= Page.ResolveClientUrl("~/css-b/login.css") %>" />
</head>
<body>
<form id="Form1" runat="server" method="post">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="body0">
<div class="topcan1">
<div class="topcan2">
<div class="topcan2a">
<a href="#" class="lnava">导航1</a>
<a href="#" class="lnava">导航2</a>
<a href="#" class="lnava">导航3</a>
</div>
</div>
</div>
</div>
<div class="body1">
<div class="body">
<asp:UpdatePanel ID="topfixup" runat="server">
<ContentTemplate>
<div class="bodybgs1">
<div class="logini" id="loginbox" runat="server">
<div style=" font:bold 15px '微软雅黑', Arial, Helvetica, sans-serif;color:#59595a;width:180px; float:left; padding-bottom:13px;" id="tips">登录到网站...</div>
<div id="subform1" style="width:180px; float:left;">
<div class="tbdiv"><asp:TextBox runat="server" ID="txemail1" CssClass="txemail1"></asp:TextBox></div>
<div class="tbdiv"><asp:TextBox runat="server" TextMode="Password" ID="txpw1" CssClass="txpw1"></asp:TextBox></div>
<div class="tbdiv" style="padding:7px 0 10px 0;"><asp:CheckBox ID="CheckBox1" runat="server" Text="记住我的登录信息" Checked="true" /></div>
<div style="width:175px; float:left;font:12px/18px '微软雅黑',Arial, Helvetica, sans-serif; height:18px; color:#bbb; padding:5px 0 0 5px;"><a class="linkbtn">登录</a> <a class="linkbtn">忘记密码</a> | <a class="linkbtn" id="changeform1" >快速注册</a></div>
</div>
<div id="subform2" style="width:180px; float:left; display:none;">
<div class="tbdiv"><asp:TextBox runat="server" ID="TextBox1" CssClass="txemail2"></asp:TextBox></div>
<div class="tbdiv"><asp:TextBox runat="server" TextMode="Password" ID="TextBox2" CssClass="txpw2"></asp:TextBox></div>
<div class="tbdiv"><asp:TextBox runat="server" ID="TextBox3" CssClass="txname"></asp:TextBox></div>
<div style="width:175px; float:left;font:12px/18px '微软雅黑',Arial, Helvetica, sans-serif; height:18px; color:#bbb; padding:3px 0 0 5px;"><a class="linkbtn">提交注册</a> | <a class="linkbtn" id="changeform2">我已有账号</a></div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="bodybgs2">
<asp:ContentPlaceHolder id="rightc1" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(function()
{
$("#changeform1").click(function()
{
$("div#subform2").show();
$("div#subform1").hide();
$("div#tips").text("注册新账号...");
});
$("#changeform2").click(function()
{
$("div#subform1").show();
$("div#subform2").hide();
$("div#tips").text("登录到网站...");
});
});
</script>
补充:.NET技术 , ASP.NET