Question

我将在这里陈述我的问题..我有一个index.html页面，里面有一个prettyPhoto.js脚本。我的index.html上有一些菜单链接。说其中一个是“视频库”现在我通过Ajax加载视频库，它加载很好。但问题是我无法让prettyPhoto.js在外部加载的文件中工作。有谁知道怎么做？

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

我显然在这里做错了什么。我在谷歌找不到任何答案，因为我不知道要搜索什么。我试图搜索“在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>

Answer 1

正如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文档。

Answer 2

文档就绪已经发生，因此无法再次调用它，只需删除$(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>

Answer 3

我可以解释为什么它不起作用，但无法帮助你进行编码，因为我不熟悉那个JS lib。 JS lib在页面只加载一个时运行，因此当你创建新对象后，它无法确定新的一次将适当的事件和效果绑定到它们。您需要在加载新图库项目后再次运行图库初始化功能。

在Ajax加载的页面中加载javascript

3 个答案: