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

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

javascript jquery ajax

Javascript 通过AJAX打开页面时，Jquery功能不起作用。,javascript,jquery,ajax,Javascript,Jquery,Ajax,我试图通过AJAX打开一个包含jquery功能的HTML页面我试图打开的页面是： <!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"&

我试图通过AJAX打开一个包含jquery功能的HTML页面

我试图打开的页面是：

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


使用jQuery实现平滑的上下滑动缩略图效果
$（文档）.ready（函数（）{
//过渡效应
风格='easeOutQuart'；
//如果鼠标悬停在图像上
$（'.photo'）。悬停(
函数（）{
//显示标题和标题
$（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}）；
},
函数（）{
//隐藏标题和说明
$（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}）；
}
);
});
.photo{position:relative；font-family:arial；overflow:hidden；border:5px solid#000；宽度：350px；高度：233px；}.photo.heading.photo.photo.caption{position:absolute；background:arial；高度：50px；宽度：350px；不透明度：0.6；}.photo.heading{top:-50px；}.photo.photo.caption{底部：-50px；左侧：0px；}.photo.heading跨度{颜色：#26c3e5；顶部：-50px；字体大小：粗体；显示：块；填充：5px 0 0 10px；}。照片。标题span{颜色：#999；字体大小：9px；显示：块；填充：5px 10px 0 10px；}
长焦镜头

通过ajax打开此页面的index.html页面包含以下代码：

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


//获取特定于浏览器的XmlHttpRequest对象
函数getXmlHttpRequestObject（）{
if（window.XMLHttpRequest）{
返回新的XMLHttpRequest（）；//不是IE
}else if（window.ActiveXObject）{
返回新的ActiveXObject（“Microsoft.XMLHTTP”）；//IE
}否则{
//在此处显示错误消息。
警报（“您的浏览器不支持XmlHttpRequest对象。最好升级。”）；
}
}           
//获取特定于浏览器的XmlHttpRequest对象。
var receiveReq=getXmlHttpRequestObject（）；
//启动异步请求。
函数init（）{
你好（1）；
}
window.onload=init；
函数sayHello（x）{
//如果我们的XMLHtRPREQuestObjor对象不在请求的中间，则启动新的异步调用。
如果（receiveReq.readyState==4 | | receiveReq.readyState==0）{
receiveReq.open（“GET”，“pages/mobile.html”，true）；
//设置XmlHttpRequest对象状态更改时将调用的函数。
receiveReq.onreadystatechange=handleSayHello；
//提出实际要求。
接收方发送（空）；
}           
}
//每次XmlHttpRequest对象状态更改时调用。
函数handleSayHello（）{
//检查XmlHttpRequests状态是否已完成。
如果（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>


 
将不执行innerHTML
引入的脚本。您应该使用DOM方法createElement和appendChild来构建页面。一个简单的示例：
script = document.createTextNode("alert('Run')");
tag =  document.createElement('script');
tag.appendChild(script);
div.appendChild(tag);
script=document.createTextNode（“警报（'Run'）”）；
tag=document.createElement（'script'）；
appendChild（脚本）；
div.appendChild（标签）；
pages文件夹旁边有一个scripts文件夹，对吗？您可以尝试从外部站点加载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