在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

回答

相關問題