Question

我的页面使用AJAX脚本，该脚本从单独的HTML页面“content.html”动态地将内容加载到我的内容DIV中。

我一次又一次面临的问题是，如果内容包含任何形式的脚本，例如我的幻灯片JQuery插件或我的动态标签插件，它将无法正常工作。

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

如果您注意到该页面上的图像幻灯片，以及文本下方的选项卡，它们是JQuery的示例，当通过我的AJAX脚本加载到该内容DIV时，它将无法工作。如果单击左侧导航栏上的“关于”，您会注意到图像幻灯片显示消失，存在加载它的代码，但由于某种原因，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的＆＃34;脚本执行＆＃34; 部分中的示例。

使用不带后缀选择器表达式的URL调用.load()时，在删除脚本之前将内容传递给.html()。这将在丢弃之前执行脚本块。但是，如果使用附加到URL的选择器表达式调用.load()，则在更新DOM之前会删除脚本，因此不会执行脚本。两种情况的示例如下所示：

在以下情况中，正在加载到#b的文档中的脚本块被删除，未执行：

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

您可以尝试使用.load()回调函数中的jQuery .getScript() method。这将确保在加载和执行脚本之前加载新的HTML。

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

JQuery / JavaScript无法在WITHIN AJAX脚本中运行

1 个答案: