JQuery - $(document).ready() 在元素加载之前执行答案

【问题标题】：JQuery - $(document).ready() executing BEFORE element loadJQuery - $(document).ready() 在元素加载之前执行
【发布时间】：2011-04-05 03:01:52
【问题描述】：

所以，我正在从返回 Json 的 MVC3 操作中加载一些数据，其中包含一些参数和内容作为字符串。我将内容附加到某个 div。在部分视图中，我有一个 document.ready JQuery 事件。由于某种原因，该函数在附加内容之前执行，并且我在就绪函数中声明的所有选择器都是空的。

这有逻辑上的原因吗？我是否设置了选择器看到元素的超时时间。但是超时可能非常不精确。

有什么建议吗？

谢谢！

示例代码小提琴：http://jsfiddle.net/aKxy7/

【问题讨论】：

标签： javascript jquery asp.net-mvc

【解决方案1】：

听起来您希望$(document).ready() 在所有资产加载后触发。 $(document).ready() 不是这样工作的。它在 DOM 完成渲染时触发。而已。听起来您想使用$(window).load()，它确实会等到所有资源都加载完毕。

【讨论】：

$(window).load() 函数不会在 AJAX 请求中触发，因为我没有执行整页回发。
提示：$(window).load() 从 1.8 版开始被弃用。

【解决方案2】：

$(document).ready() 在 HTML 时被调用！已加载。这意味着，如果您的 HTML 加载了一些对 HTML DOM 进行更改的 javascript，则那些 $(document).ready() 会在此之前被调用。

您应该确保您的函数是最后调用的，或者使用 setTimeout 调用自身，直到您需要的元素全部加载完毕。

【讨论】：

【解决方案3】：

在你的 $(document).ready 函数中你可以调用 jQuery 的 $.ajax 或 $.getJSON 从您的服务器获取答案。然后你可以在你想要的地方注入 json 响应。不需要 setTimeout

【讨论】：

【解决方案4】：

$(document).ready in ascx page after ajax callback

我有同样的问题。

【讨论】：

我无法使用该解决方案，因为这些 JS 库在 MVC 中不可用。

【解决方案5】：

首先，

var elementIWannaGet = $('html-content-div');

应该是

var elementIWannaGet = $('#html-content-div');

但是，最好将脚本与内容分开，因为 dom 已经加载...

考虑更改对此的响应：

{ result: true,
  data: { id: '1' },
  elementId: '#html-content-div',
  content: '<div id="html-content-div">Html content! :D</div>'
}

然后按如下方式更改您的 contentLoaded 处理程序：

function contentLoaded(response) {
    if (response.result == true)
        handleError(response);

    // Get the container where the response.content will be rendered to.
    var targetContainer = $('#target-container-id');

    // Append the content
    targetContainer.append(response.content);

    // Do something with your container
    alert( $(response.elementId).html().length );
}

【讨论】：

【解决方案6】：

我最终编写了一个方法，该方法等待通过 ajax 加载的 HTML 中的选定元素准备就绪。

【讨论】：

我知道这是一个旧答案，但你能提供一个代码 sn-p 吗？