通过 AJAX 加载后，如何在 jQuery 中运行 DOM 就绪函数？答案

【问题标题】：How to run DOM ready functions in jQuery when they have been loaded via AJAX?通过 AJAX 加载后，如何在 jQuery 中运行 DOM 就绪函数？
【发布时间】：2011-08-19 16:00:52
【问题描述】：

我的公司有一个用 ASP.NET 构建的 Web 应用程序，他们要求我为他们已有的仪表板页面编写一个小部件。这些小部件是在运行时动态加载的自定义用户控件。我的问题是我有一些自定义 javascript 需要在每次加载小部件时运行。

$(function ()
{
    // Setup widget.
});

这在仪表板页面首次加载时效果很好。我的 DOM 就绪功能运行，一切正常。但是，每当用户在其仪表板上移动小部件时，所有小部件都在更新面板中，并且它们都使用 AJAX 重新加载。 DOM 就绪函数在通过 AJAX 插入页面时不会运行。

关于如何确保每次加载小部件时此代码都运行的任何建议？

【问题讨论】：

标签： c# javascript jquery asp.net ajax

【解决方案1】：

我解决这个问题的方法是在您最初在加载时定义给定事件投标时命名它们。然后，在 ajax 的回调函数中取消设置这些事件，并为新创建的 dom 元素再次设置它们。

【讨论】：

我的问题是我无法控制小部件的加载方式。不幸的是，我只能在小部件的范围内工作。如果我可以修改 ajax 调用，我肯定会。
啊，嗯。这很棘手。我不能说我以前尝试过这样做。 iframe 不是一种选择吗？也许您可以让这些脚本在悬停而不是加载时运行？那行得通吗？也许你可以让那些最初运行的函数动态地将脚本加载到页面的头部，然后以某种方式监听那个 ajax reshuffle 事件？我不知道这是否会让一切变得更容易或更难......
好主意。我会试一试。

【解决方案2】：

不能不使用 ASP.Net AJax pageLoad() 函数吗？

在这里解释它与 $(document).Ready() 的不同之处 -> http://encosia.com/document-ready-and-pageload-are-not-the-same/

【讨论】：

【解决方案3】：

您可以让每个小部件在其 HTML 写入 DOM 后调用 setup 函数。

【讨论】：

这不是我要问的吗？我尝试在小部件底部包含一个未准备好 DOM 的脚本。这会在页面加载时触发，但在通过 ajax 重新加载时不会再次触发。
DOM 准备好一次 - 当初始页面被渲染时。当有回流或重绘时，它不会停止“准备好”。您所能做的就是在执行代码之前查询 DOM 以查看您的元素是否存在。
我想我要解释的重点是你不能依赖“dom ready”，你需要挂钩其他东西。也许您可以轮询 DOM 以了解计时器的变化。
我试图解释我非常清楚我不能依赖 dom 准备好。因此问题是，我正在寻找建议的替代方案，而不是说明我需要替代方案的事实。

【解决方案4】：

当您进行 ajax 调用时，返回函数会执行您的设置代码

$.post(url, {/*data*/}, function() {
    // return function call
    // do setup code
});

编辑：

由于你没有控制权，你可以有一个处理程序来拦截 ajax 调用：

$(#your-widget-area).ajaxComplete(function(e, xhr, settings) {

});

你可以在这里找到文档：http://api.jquery.com/ajaxComplete/

【讨论】：

查看对 Hoatzin 回答的评论。听起来如果没有那个控制，我可能会被搞砸。