JQuery/JavaScript將無法在AJAX腳本中工作

Question

我的頁面使用AJAX腳本，它可以從單獨的HTML頁面「content.html」動態地將內容加載到我的內容DIV中。

但我一次又一次地面臨的問題是，如果內容包含任何形式的腳本，例如我的幻燈片JQuery插件或我的動態標籤插件它根本不會工作。

我的網站是： http://www.crookedcartoon.co.uk/print.html

如果您發現該網頁上的圖像幻燈片股票，以及下面的文字標籤，它們是在加載到通過這些內容DIV是行不通的jQuery例子我AJAX腳本。如果您點擊左側導航欄上的「關於」，您會注意到圖像幻燈片消失，代碼存在以供加載，但由於某種原因，AJAX和其他代碼的組合不希望上班。

例如，我的AJAX代碼：

$(document).ready(function(){ 
    $("#about2").click(function(){ 
    $("#content").load("content.html #about"); 
}); 

    $("#process2").click(function(){ 
    $("#content").load("content.html #process"); 
}); 

}); 

然後在 「content.html」 我 「#about」 DIV內我有我的幻燈片顯示的代碼是：

<div id="about"> 

<div id="slides"> 
<img src="images/inkedup1slide.jpg"> 
<img src="images/catwalk2slide.jpg"> 
<img src="images/teatslide.jpg"> 
<img src="images/infiniteslide.jpg"> 
<img src="images/cc2slide.jpg"> 
</div> 
</div> 

腳本對於幻燈片，這是不是我的，只是一個插件是：

$(function() { 
     $('#slides').slidesjs({ 
     width: 740, 
     height: 100, 
     navigation: { 
      effect: "fade" 
     }, 
     pagination: { 
      effect: "fade" 
     }, 
     play: { 
      active: true, 
      auto: true, 
      interval: 4000, 
      swap: true, 
      effect: "fade" 
     }, 
     effect: { 
      fade: { 
      speed: 800 
      } 
     } 
     }); 
    }); 

加上整個插件腳本，這似乎是無果而終複製到這裏，因爲它很大，並且是一個完全可用的插件。

任何人都可以幫助我嗎？這讓我很生氣。

感謝，萬事如意， 亞歷

Answer 1

你的代碼...

$("#content").load("content.html #about"); 

就像是在the .load() documentation的「腳本執行」部分的示例。

當使用URL不具有後綴選擇表達主叫​​，內容被傳遞到.html()腳本之前被移除。這會在腳本塊被丟棄之前執行。但是，如果使用附加到URL的選擇器表達式調用​​，則會在更新DOM之前剝離腳本，從而不執行。的兩種情況下的一個例子在下面可以看到：

在以下情況下，在文件中的腳本塊被加載到#b被剝離出來，不執行：

$("#b").load("article.html #target");

---

您可以嘗試在​​回調函數中使用jQuery .getScript() method。這將確保在加載和執行腳本之前加載新的HTML。

$("#content").load("content.html #about", function() { 
    $.getScript("myJavaScript.js"); 
});