通过AJAX打开页面时Jquery功能不起作用。

我想通过AJAX打开一个带有jQuery功能的HTML页面。通过AJAX打开页面时Jquery功能不起作用。

我试图打开的页面是：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Slick Slide Up and Down Thumbnail Effect with jQuery</title> 
<script type="text/javascript" src="../scripts/jquery-1.3.1.min.js"></script> 
<script type="text/javascript" src="../scripts/jquery.easing.1.3.js"></script> 
<script> 
    $(document).ready(function() { 

     // transition effect 
     style = 'easeOutQuart'; 

     // if the mouse hover the image 
     $('.photo').hover(
      function() { 
       //display heading and caption 
       $(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style}); 
       $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style}); 
      }, 

      function() { 
       //hide heading and caption 
       $(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style}); 
       $(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style}); 
      } 
     ); 

    }); 
    </script> 
<style>.photo{position:relative;font-family:arial;overflow:hidden;border:5px solid #000;width:350px;height:233px;}.photo .heading,.photo .caption{position:absolute;background:#000;height:50px;width:350px;opacity:0.6;}.photo .heading{top:-50px;}.photo .caption{bottom:-50px;left:0px;}.photo .heading span{color:#26c3e5;top:-50px;font-weight:bold;display:block;padding:5px 0 0 10px;}.photo .caption span{color:#999;font-size:9px;display:block;padding:5px 10px 0 10px;}</style> 
</head> 
<body> 
<div class="photo"> 
<div class="heading"><span>Telephoto Lens</span></div> 
<img src="images/fall.jpg" width="350" height="233" alt=""/> 

</body> 
</html>

而且index.html页面即开通过AJAX这个页面有代码：

<script language="JavaScript" type="text/javascript"> 

     //Gets the browser specific XmlHttpRequest Object 
     function getXmlHttpRequestObject() { 
      if (window.XMLHttpRequest) { 
       return new XMLHttpRequest(); //Not IE 
      } else if(window.ActiveXObject) { 
       return new ActiveXObject("Microsoft.XMLHTTP"); //IE 
      } else { 
       //Display your error message here. 
       alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade."); 
      } 
     }   
     //Get our browser specific XmlHttpRequest object. 
     var receiveReq = getXmlHttpRequestObject();  
     //Initiate the asyncronous request. 

     function init(){ 
      sayHello(1); 
     } 

     window.onload=init; 

     function sayHello(x) {   
      //If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call. 
      if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { 
receiveReq.open("GET", 'pages/mobile.html', true); 
//Set the function that will be called when the XmlHttpRequest objects state changes. 
       receiveReq.onreadystatechange = handleSayHello; 
       //Make the actual request. 
       receiveReq.send(null); 
      }   
     } 
     //Called every time our XmlHttpRequest objects state changes. 
     function handleSayHello() { 
      //Check to see if the XmlHttpRequests state is finished. 
      if (receiveReq.readyState == 4) { 
       document.getElementById('span_result').innerHTML = receiveReq.responseText; 
} 
     }

而对于你的HTML部分查看：

<div id="nav"> 
        <table class="nav"> 
         <tr><th>&nbsp</th></tr> 
         <tr><td id="selected"><a href="javascript:sayHello(1);">Distinguished Techonologist Program</a></td></tr> 
         <tr><td><a href="javascript:sayHello(2);">Mobile Solution</a></</td></tr> 
         <tr><td><a href="javascript:sayHello(3);">HTML5 Canvas</a></td></tr> 
         <tr><td><a href="javascript:sayHello(4);">Doamin Expertise</a></td></tr>  
        </table> 
       </div> 

<div id="carousel"> 
        <span id="span_result"></span> 
       </div>

请帮助..

提前

感谢

问候 Zeeshan通过innerHTML介绍

来源

2012-02-15 Zeeshan Rang

所以有一个脚本文件夹旁边的网页文件夹，对不对？你能尝试从外部网站加载jquery.js和jquery.easing.js吗？像这样：'http：// code.jquery.com/jquery-1.3.1.min.js'和'http：// gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js' – papaiatis 2012-02-15 08:41:57

脚本将不被执行。您应该使用DOM方法createElement和appendChild构建页面。一个简单的例子：

 
script = document.createTextNode("alert('Run')"); 
tag = document.createElement('script'); 
tag.appendChild(script); 
div.appendChild(tag);

来源

2012-02-15 09:33:11 xiaowl

通过AJAX打开页面时Jquery功能不起作用。

回答

相关问题