当通过ajax调用页面时，jQuery不工作_Jquery_Ajax

当通过ajax调用页面时，jQuery不工作

jquery ajax

当通过ajax调用页面时，jQuery不工作,jquery,ajax,Jquery,Ajax,这是index.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

这是

index.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>  

<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>

这是

fade.js

文件

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

最后是ajax调用

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效果不起作用。请提供帮助。

您还需要在

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:，如果可以的话，还应该包括该库的最新版本

第二，我认为您希望在每次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>


var XMLHttpRequestObject；
if（window.XMLHttpRequest）
{
XMLHttpRequestObject=新的XMLHttpRequest（）；
}
else if（window.ActiveXObject）
{
XMLHttpRequestObject=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
函数showHint（ide）{
if（XMLHttpRequestObject）
{
XMLHttpRequestObject.onreadystatechange=函数（）{
if（XMLHttpRequestObject.readyState==4&&XMLHttpRequestObject.status==200）
{
document.getElementById（“内容”）.innerHTML=XMLHttpRequestObject.responseText；
$（“body”）.css（“display”、“none”）；
$（“正文”）。fadeIn（2000年）；
}
}
如果（ide==“0”）
{
open（“GET”，“index.html”，true）；
}
else if（ide==“1”）
{
open（“GET”，“about_me.htm”，true）；
}
否则如果（ide==“2”）
{
XMLHttpRequestObject.open（“GET”，“contact.htm”，true）；
}
XMLHttpRequestObject.send（）；
}
}
$（文档）.ready（函数（）{
$（“body”）.css（“display”、“none”）；
$（“正文”）。fadeIn（2000年）；
});



头版



更多信息



联系



将您的资料发送给我们



法律事务

您的contact.html：

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

滚动菜单项以将其展开。

我没有看到任何类似于jQuery方法调用的东西。对不起，post Update Now做到了这一点，但太不起作用了。！！实际上，通过ajax加载页面时，不会调用脚本。有什么解决办法吗？编辑了答案。看看这对你是否有效。最重要的部分是在

document.getElementById（“content”）.innerHTML=XMLHttpRequestObject.responseText之后调用主体的fadein函数Thx很多人，这是工作。但是，如果我希望在每次ajax调用之后执行一个外部jquery脚本呢？请帮助：）您将该脚本放在index.html的头部，并将要添加的任何函数放在放置fadein函数的同一位置，如果（XMLHttpRequestObject.readyState==4&&XMLHttpRequestObject.status==200）{}
<p>Rollover a menu item to expand it.</p>