JQuery - $（document）.ready（）執行BEFORE元素加載

Question

所以，我正在從一個返回Json的MVC3動作中加載一些數據，其中包含一些參數和內容作為字符串。 我將內容附加到某個div。 在局部視圖中，我有一個document.ready JQuery事件。 由於某種原因，函數在附加內容之前執行，並且我在ready函數中聲明的所有選擇器都是空的。

這有邏輯上的原因嗎？ 我設置超時選擇器看到元素。 但是超時可能非常不精確。

有什么建議？

謝謝！

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

Answer 1

這聽起來像你期望$(document).ready()所有資產產生被加載后觸發。 這不是$(document).ready()工作原理。 它在DOM完成渲染時觸發。 而已。 聽起來你想使用$(window).load() ，它會等到所有資產都加載完畢。

Answer 2

HTML時調用$(document).ready() ！ 已加載。 這意味着如果你的HTML加載了一些改變HTML DOM的javascript，那么$(document).ready()會在此之前被調用。

你應該確保你的函數最后被調用，或者使用調用自身的setTimeout ，直到你需要的元素都被加載。

Answer 3

在$（document）.ready函數中，您可以調用jQuery的$ .ajax或$ .getJSON來從服務器獲取答案。 然后你可以在你想要的地方注入json響應。 不需要setTimeout

Answer 4

在ajax回調之后的$（document）.ready在ascx頁面中

我遇到過同樣的問題。

Answer 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 );
}

Answer 6

我最終編寫了一個方法，該方法一直等到通過ajax加載的HTML中的選定元素准備就緒。