Question

我试图通过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>

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

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

Answer 1

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

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

通过AJAX打开页面时，Jquery功能无法正常工作。

1 个答案: