jQuery getScript() + load() 加载的内容不起作用答案

【问题标题】：jQuery getScript() + load() loaded content not workingjQuery getScript() + load() 加载的内容不起作用
【发布时间】：2011-04-13 19:58:49
【问题描述】：

我有一个包含五个按钮的文档。在这排按钮下方，我生成了一个占位符div。当我点击一个按钮时，我使用load() 将来自另一个页面的div 加载到占位符中（每个按钮将一段HTML 加载到占位符div 中）。

好的，我的问题是我加载到占位符中的块是幻灯片（anythingslider）。即使我在主页上有另一个幻灯片并且已经加载了所有相关的 CSS 和 JS，它们也不起作用。

据我所知，我需要使用getScript()，但我似乎仍然没有掌握它。是否需要重新加载相关脚本？

提前感谢您的帮助 - K

【问题讨论】：

我很困惑到底是什么问题。你能详细说明什么是行不通的吗？ javascript没有加载吗？你得到js错误吗？调用load时html没有加载吗？
这是您要找的东西吗？ w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax1
我有一个页面，其中包含一组完美的幻灯片。在页面的下方，我想通过 load() 加载另一个幻灯片；然而，即使我希望加载到母版页中的幻灯片与页面上已经存在的幻灯片完全相同，加载的幻灯片也无法正常工作，即它看起来就像我在浏览器中禁用了 javascript。
@Trevor - 不是真的。我能够加载内容很好，只是加载的内容需要js才能运行，那么我就有问题了。
@Kevin 为什么不将脚本保留在加载 html 的页面上呢？

标签： jquery load slideshow getscript

【解决方案1】：

听起来您只需要从回调函数（在加载内容后调用）初始化滑块。代码看起来像这样：

$('div#placeholder1').load('content.html', function() {
  // target the loaded div, find the slider and initialize it
  $('div#placeholder1').find('ul.slider').anythingSlider({ /* options */ });
});

【讨论】：

【解决方案2】：

听起来您正在将 html 加载到您的页面中，但在您完成之后并没有实例化滑块。从另一个页面加载 html，不会带来另一个页面上运行的 JS 对象。

【讨论】：

其中包含的任何脚本或函数也不一定会执行。你也不希望他们这样做！
所以即使包含“已加载”内容的页面中已经存在相应的 js + css 文件，我也需要实例化？

【解决方案3】：

这对我来说可以将“依赖于 jquery 的内容”加载到网页文档中。我个人喜欢把东西保存在函数中，因为当你周围有其他脚本时，它更容易维护。我创建了一个名为 globalSections 的函数，只要我保持以下模式，它就可以在任何页面上使用。在函数中，我创建了一个 div 元素，其 ID 称为“header”。然后我将我的外部“依赖于 jquery 的内容”加载到新创建的 div 中。 最后，获取运行该内容所需的脚本。

$.globalSections = function() {
  $('#wrapper').prepend('<div id="header"></div>');
  $('#header').load('/myfile.html', function() {
  $.getScript("js/jquery.scripts.js");
  });
}

然后运行函数

$(function() {
  $.globalSections();
});

短小精悍

【讨论】：

【解决方案4】：

对于我在加载的内容上使用的所有脚本，我在通过.load() 加载的内容时确实遇到了同样的问题。

尝试将 script.js 放在顶部、底部，甚至在加载时内容尚无解决方案。

一般情况下我该如何解决？

编辑：

刚刚找到答案：

$(document).ajaxComplete(function(){
    // fire when any Ajax requests complete
})

链接：Running JQuery scripts on AJAX loaded content

【讨论】：