$(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文件，而不是超时。

EDIT1：

我在这里添加了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");
});

Answer 2

正如您在第一行中提到的，您正在加载动态争用，因此您的预定义的单击处理程序不会为稍后添加的内容触发。

因此，您需要使用事件委托。

为此请使用jQuery.on();。

样本

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