当前位置:编程学习 > C#/ASP.NET >>

在母版中使用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之类的设计代码相分离的,其操作更加简单一致,有了任何问题你也好根据其机制去更加直接地找出问题。 --------------------编程问答--------------------
引用楼主 zdwcy123 的回复:
假设我想在母版页中控制两个Div的显隐,代码如下:
<script type="text/javascript"> 
$(function()
 {
  $("#changeform1").click(function()
  {
  $("#tips").text("注册新账号...");
  $("#subform2").show();
  $("#subform1").hid……

看你是放在母版页的顶部还是尾部了,总之要放在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的
--------------------编程问答--------------------
引用 4 楼 liuchaolin 的回复:

我都习惯把它放在最尾部的。 --------------------编程问答--------------------
引用 5 楼 ljx09195117 的回复:
JScript code

    <script type="text/javascript">
        $(document).ready(function () {
            $('#changeform1').bind('click', function () {
                $("#tips").text("注册新账号...");
 ……

感谢,但还是不行哦。我贴个简易代码上来看看
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="~/cs/aa.master.cs" Inherits="aa" %>
<!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>  
--------------------编程问答-------------------- 我也遇到类似问题了,mvc的母板页中,搞死都运行不了jquey代码,连alert(“Hello!”),都不行,晕死 --------------------编程问答-------------------- 我也遇到类似问题了,mvc的母板页中,搞死都运行不了jquey代码,连alert(“Hello!”),都不行,晕死 --------------------编程问答-------------------- 我也遇到类似问题了,mvc的母板页中,搞死都运行不了jquey代码,连alert(“Hello!”),都不行,晕死
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,