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"); 
});