javascript - $(document).ready 无法在 ajax 页面中工作

Question

我正在使用 ajax 动态加载页面内容，并且我想使用函数加载某些 .js 文件。 .js 文件加载正常，但仅在通过 ajax 加载下一页之前。

例如:从主页到传记页面:第一次加载 .js 文件第二:加载传记页面(通过ajax)

看起来 ajax 页面始终处于状态文档就绪状态。因此它会在通过ajax加载传记页面的内容之前立即触发.js文件。

$(document).ready(function() {
  $(".element").click(function() {
    jQuery.getScript("http://example.com/js/file.js");  
  });           
});

我已经设法通过超时暂时解决这个问题，以便 .js 文件将在 5 秒后加载，也就是在页面简介加载之后。

$(".element").click(function() {
  setTimeout(function() {
    jQuery.getScript("http://example.com/js/file.js");
  }, 5000);
});

如何更改该函数，以便在加载传记页面(或任何其他页面)后立即加载 .js 文件，而不是超时。

编辑1:

我在这里添加了 ajax 调用: http://jsbin.com/ediFUca

Answer 1

AJAX 允许您指定回调:请求完成时调用的函数。

将您的脚本/函数放入回调中，当您的秒页面加载完成时它将执行，有效解决您的问题:

$.ajax({
    url: "test.html"
}).done(function() {
   //do things in here that should be done after the AJAX call e.g:
   jQuery.getScript("http://example.com/js/file.js");
});