在 Ajax 加载页面中加载 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8471127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
loading javascript in Ajax loaded page
提问by Tanmay
i shall state my problem here.. I have an index.html page which has a prettyPhoto.js script in it. i have some menu links on my index.html. say one of these is "video gallery" now i load video gallery through Ajax and it loads fine. but the problem is i cannot get prettyPhoto.js to work in the external loaded file. Does anyone know how to do this?
我将在这里说明我的问题.. 我有一个 index.html 页面，其中包含一个 PrettyPhoto.js 脚本。我的 index.html 上有一些菜单链接。说其中之一是“视频库”，现在我通过 Ajax 加载视频库并且加载正常。但问题是我无法让prettyPhoto.js 在外部加载的文件中工作。有谁知道如何做到这一点？
Index.html looks like this (please note i have removed unnecessary code to make it readable)
Index.html 看起来像这样（请注意，我删除了不必要的代码以使其可读）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>The Footy Lounge</title>
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" language="javascript">
function loadXMLDoc(url,containerid){
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|| window.location.href.indexOf("http")==-1)
{
document.getElementById(containerid).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET',url,true);
xmlhttp.send();
}
</script>
<!-- End Scripts -->
<!--Stylesheets-->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/articles.css" type="text/css" media="all" />
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]-->
<!-- End Stylesheets-->
</head>
<body>
<div id="navigation">
<div class="cl"> </div>
<p align="right"><ul>
<li><a href="#">news & events</a></li>
<li><a href="#">photo gallery</a></li>
<li><a href="javascript:loadXMLDoc('ajaxfiles/video_gallery.html','mainPage')">video gallery</a></li>
<li><a href="#">community</a></li>
<li><a href="#">schedules</a></li>
</ul></p>
</div>
<div id="mainPage">
</div>
<!-- this is required for prettyPhoto to work -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
video_gallery.html looks like this
video_gallery.html 看起来像这样
<!-- tried adding this, didn't work -->
<!-- <script src="../js/jquery.prettyPhoto.js" type="text/javascript"></script> -->
<div class="article-box">
<a href="images/featured-side-1.jpg?ajax=true" rel="prettyphoto">Image test</a>
</div>
<!-- I tried adding this, it didnt work -->
<!-- <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script> -->
I am obviously doing something wrong here. And i can't find any answers on Google because i don't have a clue as to what to search for. i tried searching for "loading JavaScript in ajax page" and all the possible variants i could think of.
我显然在这里做错了什么。我在谷歌上找不到任何答案，因为我不知道要搜索什么。我尝试搜索“在 ajax 页面中加载 JavaScript”以及我能想到的所有可能的变体。
EDIT:Ok i got it working. thanks to the people who answered. here is code.
编辑：好的，我让它工作了。感谢回答的人。这是代码。
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#video_gallery").click(function(){
$("#mainPage").load('ajaxfiles/video_gallery.html',function (text, statusText){
if (statusText === "success")
{
$("a[rel^='prettyPhoto']").prettyPhoto();
<!-- target.find("a[rel^='prettyPhoto']").prettyPhoto(); --> //this didnt work for me so i used the above one. firebug gave me some error about target.find
}
});
});
});
</script>
回答by Andy E
As haynar mentioned, the content is loaded after prettyPhoto has been initialised. To work around this problem, you need to call the prettyPhoto initialisation function after loading the new content.
正如 haynar 提到的，内容是在prettyPhoto 初始化后加载的。要解决此问题，您需要在加载新内容后调用prettyPhoto 初始化函数。
To make your life a whole lot easier (and your code a whole lot neater), change your loadXMLDocfunction to take advantage of jQuery's built-in AJAX utilities, namely load():
为了让您的生活更轻松（并使您的代码更整洁），请更改您的loadXMLDoc函数以利用 jQuery 的内置 AJAX 实用程序，即load()：
function loadContent (url, container) { // remember, you're not loading XML
var target = $(container);
target.load(url, function (text, statusText) {
if (statusText === "success") {
target.find("a[rel^='prettyPhoto']").prettyPhoto();
}
});
}
loadautomatically inserts the HTML into the container for you, and the callback function in the code runs and initializes prettyPhoto for any new elements that have been added to the document.
load自动为您将 HTML 插入到容器中，代码中的回调函数运行并为已添加到文档中的任何新元素初始化 PrettyPhoto。
Don't forget to change references to loadXMLDocto loadContent, the latter is a better name since you're not actually loading an XML document.
不要忘了变化引用loadXMLDoc到loadContent，后者是一个更好的名字，因为你没有实际加载的XML文档。
回答by Niels
The document ready has already occured, so it is not possible to call it again, just remove the $(document).ready(), but keep the $("a[rel^='prettyPhoto']").prettyPhoto();
准备好的文档已经发生了，所以不能再调用了，去掉就行了$(document).ready()，但保留$("a[rel^='prettyPhoto']").prettyPhoto();
If I am right, your Javascript does get loaded when you add it as a script tag (without commenting it out).
如果我是对的，当您将 Javascript 添加为脚本标记时（不将其注释掉），确实会加载您的 Javascript。
So the result wil be:
所以结果将是：
<script src="../js/jquery.prettyPhoto.js" type="text/javascript"></script>
<div class="article-box">
<a href="images/featured-side-1.jpg?ajax=true" rel="prettyphoto">Image test</a>
</div>
<script type="text/javascript" charset="utf-8">
$("a[rel^='prettyPhoto']").prettyPhoto();
</script>
回答by haynar
I can explain you the reason why it doesn't work, but can't help you with coding 'cause I'm not familiar with that JS lib. JS lib run when page loads only ones, so when after it you're creating new objects it can't determine the new once to bind appropriate events and effects to them. You need to run your gallery initialization function one more time after loading new gallery items.
我可以向您解释它不起作用的原因，但无法帮助您进行编码，因为我不熟悉该 JS 库。JS lib 在页面只加载一个时运行，所以当你在它之后创建新对象时，它无法确定新的一次以将适当的事件和效果绑定到它们。加载新的图库项目后，您需要再次运行图库初始化函数。
