Javascript的满载阿贾克斯只能在第一时间 [英] Javascript loaded with ajax only works the first time
问题描述
我创建了两个简单的testpages。一个加载另一个使用XMLHtt prequest。 （只是用slimbox显示图像页） 这完美的作品第一次。但是，试图再次运行，由$ P $再次pssing按钮时，就不再工作了。当我重新加载整个页面，它的工作原理又是第一次。我必须不带载或重新加载脚本什么的？ 我知道这是双脚本标签在这里，不知道为什么，但它我唯一的办法把它摆在首位的工作。为什么它只能在第一时间？
I've created two simple testpages. One loads the other one using XMLHttpRequest. (just a page using slimbox to display a image) This works perfect the first time. But when trying to run it again, by pressing the button again, it does not work anymore. When I reload the whole page, it works the first time again. Do I have to un-load or re-load the scripts or something? I know It is double of the script-tags here, don't know why but its the only way I got it to work in the first place. How come it only works the first time?
请帮忙。
testajax.php
testajax.php
<html>
<head>
<link rel="stylesheet" href="SlimBox/css/slimbox.css" type="text/css" media="screen" />
<script id="script1" type="text/JavaScript"></script>
<script id="script2" type="text/JavaScript"></script>
<script type="text/javascript" src="SlimBox/js/mootools.js"></script>
<script type="text/javascript" src="SlimBox/js/slimbox.js"></script>
<script type="text/javascript">
function loadXMLDoc(Page)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDivFull").innerHTML=xmlhttp.responseText;
document.getElementById('script1').src = 'SlimBox/js/mootools.js';
document.getElementById('script2').src = 'SlimBox/js/slimbox.js';
}
}
xmlhttp.open("GET",Page,true);
xmlhttp.send();
}
</script>
</head>
<body>
<input id="Header2" type="button" onClick="loadXMLDoc('testImage.php')" name='Sok' value='Load' >
<div id="myDivFull"></div>
</body>
</html>
testImage.php
testImage.php
<a href='img/facebook-icon.png' rel='lightbox' cap='test'><img alt='' border='0' src='img/facebook-icon.png' /></a>
编辑： 通过gilly3提供的方法工作完全与单独的js文件，但我不能让它的工作，如果我加入谷歌小工具脚本，链接到函数。难道这解决了可能以不同的方式？下面是code，我不能去上班。
The method provided by gilly3 worked perfectly with the seperate js file, however I can not get it to work if I add a google gadget script 'link' into the function. Is this solved in a different way maybe? Below is the code I can not get to work.
function addScript(src)
{
var script = document.body.appendChild(document.createElement("script"));
script.src = src;
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDivFull").innerHTML=xmlhttp.responseText;
addScript('//www.gmodules.com/ig/ifr?url=http://www.mortgage-info.com/gadgets
/gadgetsmortgagecalculator.xml&synd=open&w=250&h=200&
amp;title=Mortgage+Calculator&border=%23ffffff%7C3px%2C1px+solid+%23999999&
amp;output=js');
}
感谢你。
推荐答案
肯定有一个更好的办法来完成你正在做什么。但是，我不知道你想做什么，还有的在的一个简单的回答你的问题：
Surely there's a better way to accomplish what you are trying to do. But, I don't know what you are trying to do, and there is a simple answer to your question:
不要与创建空的脚本标记打扰。正如你动态地添加任意多个脚本标记：
Don't bother with creating the empty script tags. Just add as many script tags as you like dynamically:
function addScript(src)
{
var script = document.body.appendChild(document.createElement("script"));
script.src = src;
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDivFull").innerHTML=xmlhttp.responseText;
addScript('SlimBox/js/mootools.js');
addScript('SlimBox/js/slimbox.js');
}
编辑：的更好的方式是创建一个函数，你想要做什么，并调用它，当您需要。例如，如果你的脚本包含：
The "better way" would be to create a function that does what you want, and call it whenever you need to. Eg, if your script contained:
someArray = window.someArray || [];
var elements = document.querySelectorAll(".someClass");
for (var i = 0; i < elements.length; i++)
{
someArray.push(elements[i].value);
}
您将只需创建一个功能：
You would just create a function:
var someArray = [];
function reInit()
{
var elements = document.querySelectorAll(".someClass");
for (var i = 0; i < elements.length; i++)
{
someArray.push(elements[i].value);
}
}
然后每个收到您的AJAX数据时调用它。
Then call it each time you receive your AJAX data.
这篇关于Javascript的满载阿贾克斯只能在第一时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
