使用ajax加载的Javascript只在第一次运行

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?

我创建了两个简单的testpages。一个使用XMLHttpRequest加载另一个。(仅用一个小页面来显示图片)这是第一次完美的效果。但是当尝试再次运行时，再次按下按钮，它就不再工作了。当我重新加载整个页面时，它第一次运行。我需要卸载还是重新加载脚本还是别的什么?我知道这是脚本标签的两倍，不知道为什么，但这是我让它工作的唯一方式。为什么它只是第一次起作用?

Please help.

请帮助。

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

<a href='img/facebook-icon.png' rel='lightbox' cap='test'><img alt='' border='0' src='img/facebook-icon.png' /></a>

EDIT: 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.

编辑:gilly3提供的方法在分离的js文件中工作得很好，但是如果我在函数中添加谷歌小工具脚本“link”，我就不能让它工作。这是用另一种方法解出来的吗?下面是我无法使用的代码。

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&amp;synd=open&amp;w=250&amp;h=200& 
    amp;title=Mortgage+Calculator&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&
    amp;output=js');
}

Thank you.

谢谢你！

1 个解决方案

#1

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

Edit: 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);
    }
}

Then call it each time you receive your AJAX data.

然后在每次收到AJAX数据时调用它。

#1