跪求!:关于Ajax引用js效果的问题
引用网上一段js效果的代码,静态数据可以出发效果,但是用ajax从数据库动态生成带样式,带结构的html代码块,就没有js的效果了。。跪求解决方法。
以下是静态代码html
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="Svr_home_home" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../ui/css/reset.css" rel="stylesheet" type="text/css" />
<link href="../ui/css/style.css" rel="stylesheet" type="text/css" />
<link href="../ui/css/invalid.css" rel="stylesheet" type="text/css" />
<!--菜单信息 注意顺序 -->
<script src="../ui/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../ui/scripts/simpla.jquery.configuration.js" type="text/javascript"></script>
<script src="../ui/scripts/facebox.js" type="text/javascript"></script>
<script src="../ui/scripts/jquery.wysiwyg.js" type="text/javascript"></script>
<%-- <script src="../ui/scripts/jquery.datePicker.js" type="text/javascript"></script>
<script src="../ui/scripts/jquery.date.js" type="text/javascript"></script> --%>
<script language="javascript" type="text/jscript"></script>
<style type="text/css"></style>
</head>
<body>
<form id="form1" runat="server">
<div id="body-wrapper"> <!-- Wrapper for the radial gradient background -->
<div id="sidebar"><div id="sidebar-wrapper"> <!-- Sidebar with logo and menu -->
<h1 id="sidebar-title"><a href="#">Simpla Admin</a></h1>
<!-- Logo (221px wide) -->
<a href="#"><img id="logo" src="../ui/images/logo.png" alt="Simpla Admin logo" /></a>
<!-- Sidebar Profile links -->
<div id="profile-links">
Hello, <a href="#" title="Edit your profile">John Doe</a>, you have <a href="#messages" rel="modal" title="3 Messages">3 Messages</a><br />
<br />
<a href="#" title="View the Site">View the Site</a> | <a href="#" title="Sign Out">Sign Out</a>
</div>
<ul id="main-nav">
<li><a href="#" class="nav-top-item">CRM管理</a><ul><li><a href=../user/department.aspx onclick="javascript:click_menu('20090508092820890507490891272286')" target="Yuetion" >记录状态信息列表</a></li><li><a href=../crm/enterprise-list.aspx onclick="javascript:click_menu('20090508101011937813744125462467')" target="Yuetion" >公司列表</a></li><li><a href=../crm/contact-list.aspx onclick="javascript:click_menu('20090508133933343452706678041417')" target="Yuetion" >联系人列表</a></li><li><a href=../crm/project-list.aspx onclick="javascript:click_menu('20090508151556078475703289206421')" target="Yuetion" >项目列表</a></li><li><a href=../crm/projectstatus.aspx onclick="javascript:click_menu('20090512095359703991090156608600')" target="Yuetion" >项目状态管理</a></li></ul></li><li><a href="#" class="nav-top-item">HR管理</a><ul><li><a href=../user/department.aspx onclick="javascript:click_menu('20090508092557203945559935506523')" target="Yuetion" >人事管理</a></li><li><a href=../user/adminuser-list.aspx onclick="javascript:click_menu('20090506180509578923024107555515')" target="Yuetion" >管理员列表</a></li><li><a href=../grade/skillgrade.aspx onclick="javascript:click_menu('20090506182602593456572809070658')" target="Yuetion" >技术等级管理</a></li><li><a href=../grade/vouchergrade.aspx onclick="javascript:click_menu('20090506183534781233075399587144')" target="Yuetion" >证书认证管理</a></li><li><a href=../user/profession.aspx onclick="javascript:click_menu('20090507105047750545881009640820')" target="Yuetion" >行业分划管理</a></li><li><a href=../user/department.aspx onclick="javascript:click_menu('20090507151349531134622930896944')" target="Yuetion" >部门管理</a></li></ul></li><li><a href="#" class="nav-top-item">TAC管理</a><ul><li><a href=../user/department.aspx onclick="javascript:click_menu('20090508092755593842349508249267')" target="Yuetion" >售后服务</a></li></ul></li><li><a href="#" class="nav-top-item">系统设置</a><ul><li><a href=../menu/role.aspx onclick="javascript:click_menu('20090430153927687143101153368257')" target="Yuetion" >角色管理</a></li><li><a href=../menu/admin.aspx onclick="javascript:click_menu('20090430153945187493950574930923')" target="Yuetion" >菜单管理</a></li></ul></li> </ul>
</div>
</div> <!-- End #sidebar -->
<!-- End #main-content -->
<div id="main-content">
<iframe height="640px" width="100%" name="Yuetion" frameborder="0" src="index.aspx" >
</iframe>
</div>
</div>
</form>
<script src="../master/menu.js" type="text/javascript"></script>
</body>
</html>
上面几个js是引用的动画效果
红色代码块是ajax生成的结构数据(如果用静态直接贴上去是有效果的,但是用ajax生成就没效果,右键查看网页源码却惊奇的发现这块代码完全没有,但是页面却能显示这些数据)。
绿色那段引用是调用ajax的js页面。
请帮帮忙,如果有谁需要这个动画效果的话留邮箱我发他,大家一起研究!!!
[解决办法]
zell419#hotmail.com
看看 。
把绿色引用的js文件放上面去看看行不 。
[解决办法]
大概看了下,应该是加载内容的问题,你将$(document).ready里面的添加事件的代码做成一个函数中,在ajax回调的时候再绑定事件,$(document).ready这个可以不需要了。
function getReadyMenu() { if(xmlhttp_menu==null) return; if(xmlhttp_menu.readyState == 4) { if(xmlhttp_menu.status == 200) { document.getElementById('main-nav').innerHTML = xmlhttp_menu.responseText;bindEvent();//===========重新绑定事件 } xmlhttp_menu = null; } }function bindEvent(){//Sidebar Accordion Menu: $("#main-nav li ul").hide(); // Hide all sub menus $("#main-nav li a.current").parent().find("ul").slideToggle("slow"); // Slide down the current menu item's sub menu $("#main-nav li a.nav-top-item").click( // When a top menu item is clicked... function () { $(this).parent().siblings().find("ul").slideUp("normal"); // Slide up all sub menus except the one clicked $(this).next().slideToggle("normal"); // Slide down the clicked sub menu return false; } ); $("#main-nav li a.no-submenu").click( // When a menu item with no sub menu is clicked... function () { window.location.href=(this.href); // Just open the link instead of a sub menu return false; } ); // Sidebar Accordion Menu Hover Effect: $("#main-nav li .nav-top-item").hover( function () { $(this).stop().animate({ paddingRight: "25px" }, 200); }, function () { $(this).stop().animate({ paddingRight: "15px" }); } ); //Minimize Content Box $(".content-box-header h3").css({ "cursor":"s-resize" }); // Give the h3 in Content Box Header a different cursor $(".closed-box .content-box-content").hide(); // Hide the content of the header if it has the class "closed" $(".closed-box .content-box-tabs").hide(); // Hide the tabs in the header if it has the class "closed" $(".content-box-header h3").click( // When the h3 is clicked... function () { $(this).parent().next().toggle(); // Toggle the Content Box $(this).parent().parent().toggleClass("closed-box"); // Toggle the class "closed-box" on the content box $(this).parent().find(".content-box-tabs").toggle(); // Toggle the tabs } ); // Content box tabs: $('.content-box .content-box-content div.tab-content').hide(); // Hide the content divs $('ul.content-box-tabs li a.default-tab').addClass('current'); // Add the class "current" to the default tab $('.content-box-content div.default-tab').show(); // Show the div with class "default-tab" $('.content-box ul.content-box-tabs li a').click( // When a tab is clicked... function() { $(this).parent().siblings().find("a").removeClass('current'); // Remove "current" class from all tabs $(this).addClass('current'); // Add class "current" to clicked tab var currentTab = $(this).attr('href'); // Set variable "currentTab" to the value of href of clicked tab $(currentTab).siblings().hide(); // Hide all content divs $(currentTab).show(); // Show the content div with the id equal to the id of clicked tab return false; } ); //Close button: $(".close").click( function () { $(this).parent().fadeTo(400, 0, function () { // Links with the class "close" will close parent $(this).slideUp(400); }); return false; } ); // Alternating table rows: $('tbody tr:even').addClass("alt-row"); // Add class "alt-row" to even table rows // Check all checkboxes when the one in a table head is checked: $('.check-all').click( function(){ $(this).parent().parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked')); } ); // Initialise Facebox Modal window: $('a[rel*=modal]').facebox(); // Applies modal window to any link with attribute rel="modal" // Initialise jQuery WYSIWYG: $(".wysiwyg").wysiwyg(); // Applies WYSIWYG editor to any textarea with the class "wysiwyg"}
[解决办法]