JQuery - $ (document) .ready () loading the BEFORE element

So, I am loading some data from an MVC3 action that returns a Json containing some parameters and contents as a string. I am adding content to some kind of div. In a partial view, I have a document.ready JQuery event. For some reason, this function is executed before the content is added, and all selectors declared in the finished function are empty.

Is there a logical reason for this? I set a timeout when selectors see elements. But the timeout can be very inaccurate.

Any suggestions?

Thank!

Example script script: http://jsfiddle.net/aKxy7/

+5
source share
6

, , HTML, ajax.

0

, , $(document).ready() . , $(document).ready(). , DOM . . , $(window).load(), .

+2

$(document).ready() , HTML! . , HTML javascript, HTML DOM, $(document).ready() .

, , setTimeout, , .

0

$(document).ready jQuery   $.ajax   $.getJSON . json, . setTimeout

0

,

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

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

, , script , 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 );
}
0

All Articles