当通过ajax调用页面时，jQuery无法正常工作

时间：2013-04-10 05:58:07

标签： 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/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);
});

最后这里是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效果不起作用。请帮忙。

1 个答案:

答案 0 :(得分：2)

您还需要在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>
相关问题
最新问题