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

Question

我有一个带有五个按钮的文档。 在这行按钮下面，我生成了一个占位符 div。 当我单击按钮时，我使用 load() 从另一个页面将 div 加载到占位符中（每个按钮将一块 HTML 加载到占位符 div 中） ）。

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

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

预先感谢您的帮助 - K

Answer 1

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

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

Answer 2

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

Answer 3

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

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

然后运行该函数

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

简短而简单

Answer 4

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

尝试将 script.js 放在顶部、底部甚至加载的位置
内容尚未解决。

一般情况下我该如何修复它？

编辑：

刚刚找到答案：

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

链接：在 AJAX 加载的内容上运行 JQuery 脚本