在Ajax加載頁面中加載javascript

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

我顯然在這里做錯了。 而且我在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>

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以添加到文檔中的所有新元素。

不要忘記loadContent loadXMLDoc引用更改為loadContent ，后者是一個更好的名稱，因為您實際上並未在加載XML文檔。

Answer 2

准備就緒的文檔已經出現，因此無法再次調用它，只需刪除$(document).ready() ，但保留$("a[rel^='prettyPhoto']").prettyPhoto();

如果我是對的，那么當您將Javascript添加為腳本標簽時，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庫不熟悉，因此無法幫助您進行編碼。 JS lib僅在頁面加載時運行，因此在創建新對象后，它無法確定將對象綁定適當的事件和效果的新對象。 加載新的圖庫項目后，您需要再運行一次圖庫初始化功能。

在Ajax加載頁面中加載javascript

問題描述

3 個解決方案

解決方案1
4 已采納 2011-12-12 10:32:43

解決方案2
2 2011-12-12 07:32:16

解決方案3
1 2011-12-12 07:34:36

在Ajax加載頁面中加載javascript

問題描述

3 個解決方案

解決方案1 4 已采納 2011-12-12 10:32:43

解決方案2 2 2011-12-12 07:32:16

解決方案3 1 2011-12-12 07:34:36

解決方案1
4 已采納 2011-12-12 10:32:43

解決方案2
2 2011-12-12 07:32:16

解決方案3
1 2011-12-12 07:34:36