在Ajax加载页面加载javascript

loading javascript in Ajax loaded page

本文关键字：加载 javascript Ajax      更新时间：2023-09-26

我将在这里陈述我的问题。我有一个index.html页面，其中有一个pretyphoto .js脚本。我有一些菜单链接在我的index.html。比如其中一个是"video gallery"，现在我通过Ajax加载视频库，它加载得很好。但问题是我不能让pretyphoto .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>

正如haynar提到的，内容是在pretypto初始化之后加载的。要解决这个问题，需要在加载新内容后调用pretypto初始化函数。

为了让你的生活更轻松(和你的代码更整洁)，改变你的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插入到容器中，代码中的回调函数运行并为已添加到文档中的任何新元素初始化pretypto。

不要忘记将对loadXMLDoc的引用更改为loadContent，后者是一个更好的名称，因为您实际上没有加载XML文档。

文档准备已经发生，所以不可能再次调用它，只是删除$(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>

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

相关文章：