JQuery - $(document).ready() executing BEFORE element load

Question

So, I'm loading some data from a MVC3 action that returns Json, containing some parameters and content as a string. I append the content to some div. In the partial view I have a document.ready JQuery event. For some reason that function executes before the content is appended and all the selectors I declare in the ready function are empty.

Is there a logic reason for this? Is I set a timeout the selectors see the elements. But a timeout can be very imprecise.

Any suggestions?

Thanks!

Example code fiddle: http://jsfiddle.net/aKxy7/

Solution 1

I ended up coding a method that waits until a selected element in the HTML loaded via ajax is ready.

Solution 2

It sounds like you are expecting $(document).ready() to fire after all assests are loaded. That's not how $(document).ready() works. It is triggered when the DOM is finished rendering. Nothing more. It sounds like you want to use $(window).load(), which does wait until all assets are loaded.

Comments

[Luis Aguilar]

$(window).load() function won't fire in AJAX requests since I´m not performing a full-page postback.

[Luis Aguilar]

I can't use that solution since those JS libraries are not available in MVC.

[robsch]

Hint: $(window).load() is deprecated from version 1.8.

[Joe Maffei]

I know this is an old answer, but can you provide a code snippet?