使用AJAX打开页面时Javascript滑块不工作
我试图在点击按钮时使用ajax打开一个HTML页面 我打开的HTML页面中有一个javascript滑块，如果我自己打开页面，它就可以正常工作，但是如果我通过ajax使用index.HTML打开页面，滑块就会停止工作 我正在为两个页面添加代码，供您查看： index.html（使用ajax打开“SayHello.html”）代码如下：使用AJAX打开页面时Javascript滑块不工作,javascript,ajax,mootools,slider,Javascript,Ajax,Mootools,Slider,我试图在点击按钮时使用ajax打开一个HTML页面 我打开的HTML页面中有一个javascript滑块，如果我自己打开页面，它就可以正常工作，但是如果我通过ajax使用index.HTML打开页面，滑块就会停止工作 我正在为两个页面添加代码，供您查看： index.html（使用ajax打开“SayHello.html”）代码如下： <script language="JavaScript" type="text/javascript"> //Gets th
<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>
<!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>
//获取特定于浏览器的XmlHttpRequest对象
函数getXmlHttpRequestObject（）{
if（window.XMLHttpRequest）{
返回新的XMLHttpRequest（）；//不是IE
}else if（window.ActiveXObject）{
返回新的ActiveXObject（“Microsoft.XMLHTTP”）；//IE
}否则{
//在此处显示错误消息。
警报（“您的浏览器不支持XmlHttpRequest对象。最好升级。”）；
}
}
//获取特定于浏览器的XmlHttpRequest对象。
var receiveReq=getXmlHttpRequestObject（）；
//启动异步请求。
函数sayHello（x）{
//如果我们的XMLHtRPREQuestObjor对象不在请求的中间，则启动新的异步调用。
如果（receiveReq.readyState==4 | | receiveReq.readyState==0）{
//将连接设置为对SayHello.html的GET调用。
//True显式将请求设置为异步（默认）。
如果（x==3）
receiveReq.open（“GET”，“SayHello.html”，true）；
else如果（x==4）
receiveReq.open（“GET”，“SayHello2.html”，true）；
//设置XmlHttpRequest对象状态更改时将调用的函数。
receiveReq.onreadystatechange=handleSayHello；
//提出实际要求。
接收方发送（空）；
}
}
//每次XmlHttpRequest对象状态更改时调用。
函数handleSayHello（）{
//检查XmlHttpRequests状态是否已完成。
如果（receiveReq.readyState==4）{
//将span元素的内容设置为异步调用的结果。
document.getElementById（'span_result'）。innerHTML=receiveReq.responseText；
}
}
sd
var gaJsHost=（（“https:==document.location.protocol）？”https://ssl.“：”他说$
document.write（unescape（“%3Cscript src=”）+gaJsHost+“google-analytics.com/ga$
试一试{
var pageTracker=_gat._getTracker（“UA-1497692-16”）；
页面跟踪器。_trackPageview（）；
}捕获（错误）{}
Zeeshan通过AJAX加载的Javascript不会执行。您需要将绑定所有事件的代码移动到
handleSayHellodomready上一个和下一个单击事件。通过AJAX加载的Javascript不会执行。您需要移动c将所有事件绑定到handleSayHello
函数的ode。这适用于domready
事件，以及previous
和next
单击事件。问题是，因为您正在使用ajax加载“SayHello.html”
，所以您在其中的javascript代码不会被执行
因此，只使用html保留“SayHello.html”
，在“index.html”
中更改.innerHTML后，调用一个函数来执行任何您喜欢的操作，该函数也应该位于“index.html”
中，因为您正在加载“SayHello.html”
使用ajax时，您的javascript代码不会被执行
因此，只使用html保留“SayHello.html”
，在“index.html”
中更改.innerHTML后，调用一个函数来执行任何您喜欢的操作，该函数也应位于“index.html”
中，您可以将幻灯片代码更改为位于以下函数中：
function startSlideshow() {
// code for slideshow without domready event here
}
在domready中调用它（如果需要），并在每次加载内容时调用它
//...
document.getElementById('span_result').innerHTML = receiveReq.responseText;
startSlideshow();
//...
您可以将幻灯片放映代码更改为包含在函数中，如：
function startSlideshow() {
// code for slideshow without domready event here
}
在domready中调用它（如果需要），并在每次加载内容时调用它
//...
document.getElementById('span_result').innerHTML = receiveReq.responseText;
startSlideshow();
//...
我遇到了一个类似的问题，并使用.ajaxComplete（）
方法解决了它。因此：
$(document).ajaxComplete(function(){
//do something
});
我遇到了一个类似的问题，并使用.ajaxComplete（）
方法解决了它。因此：
$(document).ajaxComplete(function(){
//do something
});
选中此项，可能也有帮助？您需要在响应脚本标记上调用eval（）。选中此项，可能也有帮助？您需要调用eval（）实际上，mootools可以通过传递给请求类的evalscript
或evalResponse
选项导入脚本。虽然它不会启动domready事件，但不会。实际上，mootools可以通过传递给请求类的evalscript
或evalResponse
选项导入脚本虽然它不会启动domready事件，但不会。