在Ajax加载页面加载javascript

我将在此处陈述我的问题..我有一个index.html页面，其中有一个prettyPhoto.js脚本。我在我的index.html上有一些菜单链接。说其中之一是“视频库”，现在我通过Ajax加载视频库，并且加载正常。但问题是我无法让prettyPhoto.js在外部加载的文件中工作。有谁知道如何做到这一点？在Ajax加载页面加载javascript

的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">&nbsp;</div> 
      <p align="right"><ul> 
       <li><a href="#">news &amp; 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看起来像这样

<!-- 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> -->

我明明在这里做错了事。我在Google上找不到任何答案，因为我不知道要搜索什么。我试着搜索“在ajax页面中加载JavaScript”以及我能想到的所有可能的变体。

编辑： 好吧，我得到它的工作。感谢回答的人。这里是代码。

<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>

来源

2011-12-12 Tanmay

正如haynar提到的，内容在prettyPhoto初始化后加载。要解决此问题，您需要在加载新内容后调用prettyPhoto初始化函数。

为了让你的生活轻松许多（和你的代码一大堆整洁），改变你的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(); 
     } 
    }); 
}

load自动插入将HTML放入容器中，代码中的回调函数运行并初始化prettyPhoto，以获取已添加到文档中的任何新元素。

不要忘了将对loadXMLDoc的引用更改为loadContent，后者是更好的名称，因为您实际上并未加载XML文档。

来源

2011-12-12 10:32:43

我得到它的工作。我的代码有点不同，但基本的想法来自你。非常感谢。检查编辑代码放置在那里。实际上做同样的事情。谢谢 – Tanmay

我使用了这段代码，但它不适合我。可以给我一些提示，我们需要将loadcontent（）函数放在哪里以及我们要调用此函数的位置？提前致谢。 – krutssss

准备的文件已经发生，所以这是不可能再次调用它，只是删除了$(document).ready()，但保留$("a[rel^='prettyPhoto']").prettyPhoto();

如果我是正确的，当你把你的JavaScript并得到加载它作为一个脚本标记（没有评论它）。

所以结果时便会：

<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>

来源

2011-12-12 07:32:16 Niels

我很确定，如果页面已经加载，那么定义在'准备好文档'的jquery函数中的代码会立即被触发。但即使如此，我确实认为这看起来像是一个代码被解雇的问题，然后才有内容在 – Marlin

上运行，但实际上应该没有问题！ – Tanmay

你的jQuery prettyphoto是否已经在你的index.html中？为什么你再一次将它包含在你的Ajax中？这可能会导致一些JS错误。 – Niels

我可以解释为什么它不工作的原因，但不能帮助你与编码“因为我不熟悉的JS库。 JS lib在页面加载时运行，所以当你创建新的对象时，它不能确定一次新的绑定适当的事件和效果。加载新图库项目后，您需要再次运行画廊初始化函数。

来源

2011-12-12 07:34:36 haynar

感谢您的回复。我试图删除.isready但问题仍然存在。 – Tanmay

您不仅需要删除'ready'方法，还需要调用每次从AJAX中获取数据后，你的JS库的初始化函数。在AJAX中添加'$（“a [rel^='prettyPhoto']”）。prettyPhoto（）;'回调函数 – haynar

yes我也这么做了。即现在我的ajax页面看起来像上面的答复发布neils没有脚本标记。没有运气仍然 – Tanmay

在Ajax加载页面加载javascript

回答

相关问题