jQuery - 使用 AJAX 加载内容时不会触发 document.ready答案

【问题标题】：jQuery - document.ready not firing when content loaded with AJAXjQuery - 使用 AJAX 加载内容时不会触发 document.ready
【发布时间】：2011-09-21 10:24:47
【问题描述】：

我有一个简单的自定义选项卡模块，它加载带有 AJAX 请求的选项卡（通过$(elem).load()）。在使用 AJAX 加载的每个页面上，我都有一些 JavaScript。第一次加载页面（通过直接输入 URL，而不是 AJAX），javascript 完美启动。当我通过 AJAX 选项卡离开页面时，页面中的 javascript 不再加载。

有什么办法可以强制他们执行吗？

（如果有帮助，未触发的 javascript 将放在 $(document).ready() 函数中）

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

你需要使用load()函数的回调：

$(elem).load('source.html', function() { 
    // here you need to perofrm something what you need
    ActionOnDocumentReady();
});

您可以将$(document).ready 中的所有操作放入某个函数（例如ActionOnDocumentReady()）并在load() 回调中调用它。

【讨论】：

【解决方案2】：

domready 事件仅在初始 dom 准备就绪时触发（如名称和 jquery-api 建议）。

如果您想使用 jquerys load() 并在加载完成后触发函数，则必须使用回调函数 (according to the api)。

如果你想在 domready 和 load-events 上做同样的事情，最好的方法是为此定义一个新函数：

function dostuff(){
  // do some stuff here
}

并在这两种情况下触发此功能：

$(function(){  // domready | shortcut for "$(document).ready()"
  dostuff();
})

$('#something').load('script.php', function() { // callback on load()
  dostuff();
});

【讨论】：

【解决方案3】：

将您的$(document).ready() 代码放入新方法中。让我们称之为methodA。现在从$(document).ready() 调用这个methodA。其次，ajax请求成功后调用相同的方法。这应该可以解决您的问题。

【讨论】：