JQuery - $ (documento) .ready() ejecutándose ANTES de la carga del elemento

Question

Por lo tanto, estoy cargando algunos datos de una acción MVC3 que devuelve Json, que contiene algunos parámetros y contenido como una cadena. Añado el contenido a algún div. En la vista parcial, tengo un document.heady JQuery event. Por alguna razón, esa función se ejecuta antes de que se anexe el contenido y todos los selectores que declaro en la función lista están vacíos.

¿Hay una razón lógica para esto? ¿Se establece un tiempo de espera para que los selectores vean los elementos? Pero un tiempo de espera puede ser muy impreciso.

¿Alguna sugerencia?

Gracias! código

Ejemplo violín: http://jsfiddle.net/aKxy7/

Answer 1

que terminó la codificación de un método que espera hasta que un elemento seleccionado en el HTML cargada a través de AJAX está listo.

Answer 2

Parece que usted está esperando para disparar $(document).ready() después de todo Patrimonio del se cargan. No es así como funciona $(document).ready(). Se activa cuando el DOM finaliza la representación. Nada mas. Parece que quiere usar $(window).load(), que espera hasta que se carguen todos los activos.

Answer 3

$(document).ready() se llama cuando el HTML! está cargado. Esto significa que si su HTML carga un javascript que realiza cambios en el DOM HTML, se llama a esos $(document).ready() antes de eso.

Debería asegurarse de que su función se llame por última vez o usar setTimeout que se llame a sí mismo hasta que todos los elementos que necesita estén cargados.

Answer 4

En sus $ (document) La función ready puede llamar de jQuery $ .ajax o $ .getJSON para obtener la respuesta de su servidor. Entonces puedes inyectar la respuesta JSON donde quieras. No es necesario setTimeout

Answer 5

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

que tenía el mismo problema.

Answer 6

En primer lugar,

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

debería ser

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

Sin embargo, lo que puede ser mejor hacer es separar la secuencia de comandos del contenido, como el Reino ya está cargado ...

Considere cambiar la respuesta a esto:

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

y luego cambia su controlador contentLoaded de la siguiente manera:

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