jQuery的不工作时，页面通过AJAX

问题描述：

称为这是index.html页jQuery的不工作时，页面通过AJAX

<head> 
    <script src="js/jquery-1.3.js" type="text/javascript"></script> 
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> 
    <script src="js/animated-menu.js" type="text/javascript"></script> 
    <script src="js/call.js" type="text/javascript"></script>  
    <script type="text/javascript" src="js/fade.js"></script> 
</head> 

<body> 
    <div class="header">   
     <div class="menu"> 
      <ul> 
       <li class="green" > 
        <p><a href="index.html">Home</a></p> 
        <p class="subtext">The front page</p> 
       </li> 
       <li class="yellow" onclick="showHint(1)"> 
        <p><a href="#">About</a></p> 
        <p class="subtext">More info</p> 
       </li> 
       <li class="red" onclick="showHint(2)"> 
        <p><a href="#">Contact</a></p> 
        <p class="subtext">Get in touch</p> 
       </li> 
       <li class="blue"> 
        <p><a href="#">Submit</a></p> 
        <p class="subtext">Send us your stuff!</p> 
       </li> 
       <li class="purple"> 
        <p><a href="#">Terms</a></p> 
        <p class="subtext">Legal things</p> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="content" id="content"></div> 
</body>

这是我通过AJAX加载contact.html

<head> 
    <script src="js/call.js" type="text/javascript"></script> 
</head> 

<body> 
    <p>Rollover a menu item to expand it.</p> 
<h1>Hello Ajax</h1>  
</body>

这里是fade.js文件

$(document).ready(function() { 
$("body").css("display", "none"); 
    $("body").fadeIn(2000); 
});

最后这里是阿贾克斯电话

var XMLHttpRequestObject; 
    if(window.XMLHttpRequest) 
    { 
     XMLHttpRequestObject=new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject) 
    { 
     XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    function showHint(ide) { 
     if(XMLHttpRequestObject) 
     { 
      XMLHttpRequestObject.onreadystatechange=function() { 
       if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) 
       { 
        document.getElementById("content").innerHTML=XMLHttpRequestObject.responseText; 
       } 
      } 
      if(ide=="0") 
      { 
       XMLHttpRequestObject.open("GET","index.html",true); 
      } 
      else if(ide=="1") 
      { 
       XMLHttpRequestObject.open("GET","about_me.htm",true); 
      } 
      else if(ide=="2") 
      { 
       XMLHttpRequestObject.open("GET","contact.htm",true); 
      } 
     XMLHttpRequestObject.send(); 
    } 
}

问题是，当我单独拨打联系页面时，淡入淡出效果就起作用了。但是当我通过AJAX加载contact.html时，jQuery效果不起作用。请帮忙。

我没有看到任何类似的jQuery方法调用。 – 2013-04-10 05:59:48

对不起，现在发布更新 – Ajey 2013-04-10 06:01:58

答

还需要在contact.html包括所有必要的库，如下所示：

<head> 
    <script src="js/jquery-1.3.js" type="text/javascript"></script> 
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> 
    <script src="js/animated-menu.js" type="text/javascript"></script> 
    <script src="js/call.js" type="text/javascript"></script>  
    <script type="text/javascript" src="js/fade.js"></script> 
</head>

编辑：

首先，你应该学习如何使用jQuery的Ajax：http://api.jquery.com/category/ajax/，还包括最新版本的图书馆，如果你可以。

其次，我认为你希望在每次ajax调用之后对身体进行淡入效果。在这种情况下，在contact.htm中，您只需要获取正文中的内容。一切都放在一起吼叫：

<html> 
<head> 
    <script src="js/jquery-1.3.js" type="text/javascript"></script> 
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> 
    <script src="js/animated-menu.js" type="text/javascript"></script>  
    <script type="text/javascript"> 
    var XMLHttpRequestObject; 
    if(window.XMLHttpRequest) 
    { 
     XMLHttpRequestObject=new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject) 
    { 
     XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    function showHint(ide) { 
     if(XMLHttpRequestObject) 
     { 
      XMLHttpRequestObject.onreadystatechange=function() { 
       if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) 
       { 
        document.getElementById("content").innerHTML=XMLHttpRequestObject.responseText; 

        $("body").css("display", "none"); 
        $("body").fadeIn(2000); 
       } 
      } 
      if(ide=="0") 
      { 
       XMLHttpRequestObject.open("GET","index.html",true); 
      } 
      else if(ide=="1") 
      { 
       XMLHttpRequestObject.open("GET","about_me.htm",true); 
      } 
      else if(ide=="2") 
      { 
       XMLHttpRequestObject.open("GET","contact.htm",true); 
      } 
     XMLHttpRequestObject.send(); 
    } 
} 
    </script>  
    <script type="text/javascript"> 
    $(document).ready(function() { 
$("body").css("display", "none"); 
    $("body").fadeIn(2000); 
}); 
    </script> 
</head> 

<body> 
    <div class="header">   
     <div class="menu"> 
      <ul> 
       <li class="green" > 
        <p><a href="index.html">Home</a></p> 
        <p class="subtext">The front page</p> 
       </li> 
       <li class="yellow" onclick="showHint(1)"> 
        <p><a href="#">About</a></p> 
        <p class="subtext">More info</p> 
       </li> 
       <li class="red" onclick="showHint(2)"> 
        <p><a href="#">Contact</a></p> 
        <p class="subtext">Get in touch</p> 
       </li> 
       <li class="blue"> 
        <p><a href="#">Submit</a></p> 
        <p class="subtext">Send us your stuff!</p> 
       </li> 
       <li class="purple"> 
        <p><a href="#">Terms</a></p> 
        <p class="subtext">Legal things</p> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="content" id="content"></div> 
</body> 
</html>

你contact.html：

<p>Rollover a menu item to expand it.</p>

做到了这一点，但也无法正常工作。实际上当页面通过ajax加载时脚本没有被调用。任何解决方案？ – Ajey 2013-04-10 06:09:28

编辑答案。看看现在是否适合你。最重要的部分是你在document.getElementById（“content”）之后调用body的fadein函数。innerHTML = XMLHttpRequestObject.responseText;' – Alqin 2013-04-10 07:59:21

Thx很多人，这是行得通的。但是如果我想在每个Ajax调用之后执行外部jquery脚本呢？请帮助:) – Ajey 2013-04-10 08:49:45

jQuery的不工作时，页面通过AJAX

相关推荐