当前位置： 文江博客话题详情

使用 AJAX 打开页面时，Javascript 滑块不起作用

发布于 2025-01-05 21:27:24 字数 6782 浏览 0 评论 0原文

我正在尝试通过单击按钮使用 ajax 打开 HTML 页面。

我正在打开的 HTML 页面中有一个 javascript 滑块，如果我自己打开该页面，它可以正常工作，但是如果我通过 ajax 使用 index.html 打开它，滑块就会停止工作。

我将两个页面的代码供您查看：

index.html（使用ajax打开“SayHello.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 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) {
                //Setup the connection as a GET call to SayHello.html.
                //True explicity sets the request to asyncronous (default).
                if(x==3)
                    receiveReq.open("GET", 'SayHello.html', true);
                else if(x==4)
                    receiveReq.open("GET", 'SayHello2.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) {
                //Set the contents of our span element to the result of the asyncronous call.
                document.getElementById('span_result').innerHTML = receiveReq.responseText;
            }
        }
    </script>
<table class="nav">
      <tr><th>sd</th></tr>
      <tr><td><a href="javascript:sayHello(3);">Say Hello</a></td></tr>
      <tr><td><a href="javascript:sayHello(4);">Turvey, Kevin</a></</td></tr>
      <tr><td>Mbogo, Arnold</td></tr>
      <tr><td>Shakespeare, Bill</td></tr>     
    </table>
    <br /><br />

    <span id="span_result"></span>

SayHello.html代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Mirrored from woorktuts.110mb.com/art_of_reuse_code/index4.html by HTTrack Website Copier/3.x [XR&CO'2010], Tue, 14 Feb 2012 15:07:17 GMT -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Horizontal Carousel</title>
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){ 
      var totIncrement      = 0;
      var increment         = 212;
      var maxRightIncrement = increment*(-6);
      var fx = new Fx.Style('slider-list', 'margin-left', {
                duration: 1000,
                transition: Fx.Transitions.Back.easeInOut,
                wait: true
       });

       //-------------------------------------
      // EVENTS for the button "previous"
      $('previous').addEvents({ 
          'click' : function(event){ 
          if(totIncrement<0){
                    totIncrement = totIncrement+increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }                 
      }); 

       //-------------------------------------
      // EVENTS for the button "next"
      $('next').addEvents({ 
          'click' : function(event){ 
             if(totIncrement>maxRightIncrement){
                 totIncrement = totIncrement-increment;
                fx.stop()
                fx.start(totIncrement);
            }
          }               
      })


});
    </script>


<style type="text/css">
    body{
        font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#333333;
        background-color:#FFFFFF;
    }
    a:link, a:visited, a:hover{color:#0066CC; text-decoration:none;}
    #slider-stage{width:632px; overflow:auto; overflow-x:hidden; overflow-y:hidden; height:200px; margin:0 auto;}
    #slider-buttons{width:632px; margin:0 auto;}
    #slider-list{width:2000px; border:0; margin:0; padding:0; left:400px;}
    #slider-list li{
        list-style:none; 
        margin:0; 
        padding:0; 
        border:0; 
        margin-right:4px;
        padding:4px; 
        background:#DEDEDE;
        float:left;
        width:200px;
        height:200px;
        }
</style>
</head>

<body>
<h3>More tutorial here: <a href="http://woork.blogspot.com/">http://woork.blogspot.com</a></h3>
<p>Click on Previous or Next Button </p>
<div id="slider-stage">
<ul id="slider-list">
    <li id="l1">Box 1</li>
    <li id="l2">Box 2</li>
    <li id="l3">Box 3</li>
    <li id="l4">Box 4</li>
    <li id="l5">Box 5</li>
    <li id="l6">Box 6</li>
    <li id="l7">Box 7</li>
    <li id="l8">Box 8</li>
    <li id="l9">Box 9</li>
    <li id="l10">Box 10</li>
</ul>
</div>
<div id="slider-buttons">
<a href="#" id="previous">Previous</a> | <a href="#" id="next">Next</a>
</div>
</body>

<!-- Mirrored from woorktuts.110mb.com/art_of_reuse_code/index4.html by HTTrack Website Copier/3.x [XR&CO'2010], Tue, 14 Feb 2012 15:07:20 GMT -->
</html>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "ht$
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga$
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1497692-16");
pageTracker._trackPageview();
} catch(err) {}</script>

请帮忙。

问候 泽尚

原文

I am trying to open a HTML page using ajax on click of a button.

And the HTML page that I am opening has a javascript slider in it, which works fine it I open up the page by itself, but the slider stops working if I open it using my index.html via ajax.

I am putting my the code for both pages for you to see:

The index.html (which is using the ajax to open "SayHello.html") code is below:

    <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 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) {
                //Setup the connection as a GET call to SayHello.html.
                //True explicity sets the request to asyncronous (default).
                if(x==3)
                    receiveReq.open("GET", 'SayHello.html', true);
                else if(x==4)
                    receiveReq.open("GET", 'SayHello2.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) {
                //Set the contents of our span element to the result of the asyncronous call.
                document.getElementById('span_result').innerHTML = receiveReq.responseText;
            }
        }
    </script>
<table class="nav">
      <tr><th>sd</th></tr>
      <tr><td><a href="javascript:sayHello(3);">Say Hello</a></td></tr>
      <tr><td><a href="javascript:sayHello(4);">Turvey, Kevin</a></</td></tr>
      <tr><td>Mbogo, Arnold</td></tr>
      <tr><td>Shakespeare, Bill</td></tr>     
    </table>
    <br /><br />

    <span id="span_result"></span>

And the SayHello.html code is below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Mirrored from woorktuts.110mb.com/art_of_reuse_code/index4.html by HTTrack Website Copier/3.x [XR&CO'2010], Tue, 14 Feb 2012 15:07:17 GMT -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Horizontal Carousel</title>
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){ 
      var totIncrement      = 0;
      var increment         = 212;
      var maxRightIncrement = increment*(-6);
      var fx = new Fx.Style('slider-list', 'margin-left', {
                duration: 1000,
                transition: Fx.Transitions.Back.easeInOut,
                wait: true
       });

       //-------------------------------------
      // EVENTS for the button "previous"
      $('previous').addEvents({ 
          'click' : function(event){ 
          if(totIncrement<0){
                    totIncrement = totIncrement+increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }                 
      }); 

       //-------------------------------------
      // EVENTS for the button "next"
      $('next').addEvents({ 
          'click' : function(event){ 
             if(totIncrement>maxRightIncrement){
                 totIncrement = totIncrement-increment;
                fx.stop()
                fx.start(totIncrement);
            }
          }               
      })


});
    </script>


<style type="text/css">
    body{
        font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#333333;
        background-color:#FFFFFF;
    }
    a:link, a:visited, a:hover{color:#0066CC; text-decoration:none;}
    #slider-stage{width:632px; overflow:auto; overflow-x:hidden; overflow-y:hidden; height:200px; margin:0 auto;}
    #slider-buttons{width:632px; margin:0 auto;}
    #slider-list{width:2000px; border:0; margin:0; padding:0; left:400px;}
    #slider-list li{
        list-style:none; 
        margin:0; 
        padding:0; 
        border:0; 
        margin-right:4px;
        padding:4px; 
        background:#DEDEDE;
        float:left;
        width:200px;
        height:200px;
        }
</style>
</head>

<body>
<h3>More tutorial here: <a href="http://woork.blogspot.com/">http://woork.blogspot.com</a></h3>
<p>Click on Previous or Next Button </p>
<div id="slider-stage">
<ul id="slider-list">
    <li id="l1">Box 1</li>
    <li id="l2">Box 2</li>
    <li id="l3">Box 3</li>
    <li id="l4">Box 4</li>
    <li id="l5">Box 5</li>
    <li id="l6">Box 6</li>
    <li id="l7">Box 7</li>
    <li id="l8">Box 8</li>
    <li id="l9">Box 9</li>
    <li id="l10">Box 10</li>
</ul>
</div>
<div id="slider-buttons">
<a href="#" id="previous">Previous</a> | <a href="#" id="next">Next</a>
</div>
</body>

<!-- Mirrored from woorktuts.110mb.com/art_of_reuse_code/index4.html by HTTrack Website Copier/3.x [XR&CO'2010], Tue, 14 Feb 2012 15:07:20 GMT -->
</html>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "ht$
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga$
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1497692-16");
pageTracker._trackPageview();
} catch(err) {}</script>

Please help.

Regards
Zeeshan

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

妄断弥空 2025-01-12 21:27:24

通过 AJAX 加载的 JavaScript 不会执行。您需要将绑定所有事件的代码移至handleSayHello 函数。这适用于您的 domready 事件以及上一个 和 下一个 点击事件。

Javascript loaded through AJAX doesn't execute. You need to move the code that binds all events to the the handleSayHello function. That goes for your domready event, and the previous and next click events.

回复 原文
怪我闹别瞎闹 2025-01-12 21:27:24

您可以将幻灯片代码更改为函数内部，例如：

function startSlideshow() {
    // code for slideshow without domready event here
}

在 domready 内部调用它（如果需要）并在每次加载内容时调用它。

//...
document.getElementById('span_result').innerHTML = receiveReq.responseText;
startSlideshow();
//...

You can change your slideshow code to be inside a function like:

function startSlideshow() {
    // code for slideshow without domready event here
}

Call it inside domready(if needed) and call it on each time you load the content.

//...
document.getElementById('span_result').innerHTML = receiveReq.responseText;
startSlideshow();
//...
回复 原文
帝王念 2025-01-12 21:27:24

问题是，由于您正在使用 ajax 加载 "SayHello.html" ，因此您所在的 JavaScript 代码不会被执行。

因此，保留 "SayHello.html" 仅包含 html，在更改 "index.html" 中的 .innerHTML 后，调用一个函数来执行您喜欢的操作也位于“index.html”

The problem is, since you are loading "SayHello.html" with ajax the javascript code you have in there does not get executed.

So keep the "SayHello.html" with only html, and after you change the .innerHTML in " index.html" call a function to do whatever you like that should be located also in "index.html"

回复 原文
も星光 2025-01-12 21:27:24

我遇到了类似的问题并使用 .ajaxComplete() 方法解决了它。所以：

$(document).ajaxComplete(function(){
    //do something

});

I had a similar problem and solved it with the .ajaxComplete() method. So:

$(document).ajaxComplete(function(){
    //do something

});
回复 原文
~没有更多了~

关于作者

随梦而飞#

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文