jQuery .load no está comprobando si mi elemento está cargado

Question

tengo este código

<script type="text/javascript"> 
$("#main_photo_display").load(function(){ 
    alert("loaded"); 
}); 
</script> 

<div id="main_photo_display"></div> 

lo necesito hacer algo una vez que se haya cargado div. Actualmente no hace nada. Cuando sustituyo la ventana por "#main_photo_display", funciona. Busqué en Google y sigo encontrando .load para ver cómo se ha cargado un elemento de página.

Answer 1

No puede hacer eso: load los eventos no se activan en cualquier elemento HTML, solo en aquellos que requieren cargar un recurso externo.

La mejor manera de asegurarse de que el elemento esté cargado es colocar la etiqueta script después en el marcado.

<div id="main_photo_display"></div> 

<script type="text/javascript"> 
    alert("loaded"); 
</script> 

El Javascript no se ejecutará antes de la div se analice.

Answer 2

Un div simple no tiene un evento de carga, excepto cuando está cargando contenido en él con ajax (que no creo que sea lo que está haciendo aquí). Si su código está ubicado físicamente después del div en su página, entonces el div estará disponible y listo para que su código opere en él (no tiene que verificar nada).

Si el código se encuentra antes de la div en la página, a continuación, puede utilizar el método de jQuery .ready() en saber cuándo es seguro para acceder a la div:

<script type="text/javascript"> 
    $(document).ready(function() { 
     // safe to access $("#main_photo_display") here 
    }); 
</script> 

<div id="main_photo_display"></div>  

Answer 3

o puede ejecutar la secuencia de comandos después de que el DOM está dispuesto de esta manera:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#main_photo_display").load(function(){ 
     alert("loaded"); 
    }); 
}); 
</script> 

<div id="main_photo_display"></div> 

En este momento creo que he leído mal :) Usted necesita esta:

<script type="text/javascript"> 
    $(document).ready(function() { 
     alert('loaded'); 
    }); 
</script> 

Answer 4

El evento de carga se envía a un elemento cuando este y todos los subelementos tienen cargados por completo. Este evento se puede enviar a cualquier elemento asociado a una URL: imágenes, scripts, marcos, iframes y el objeto de ventana .

Fuente: http://api.jquery.com/load-event/

Más abajo, en la misma página que afirman:

No correctamente la burbuja hasta el árbol DOM

Así se puede' Para delegar este evento, el controlador de eventos se debe adjuntar al elemento en el que se desencadena el evento load.

Answer 5

No creo que un DIV active un evento cargado. Si había una imagen blank.gif dentro del DIV, podría adjuntar la función $.load() a eso.

<div id="main_photo_display"> 
    ..... Other Content ..... 
    <img class="loadcheck" src="blank.gif" width="0" height="0" /> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#main_photo_display img.loadcheck").load(function(){ 
    alert("loaded"); 
    }); 

}); 
</script> 

Answer 6

que tienen una especie de solución, y es descuidado (por favor comente si tiene notas).

Es útil cuando tiene un javascript fuera de su control que agrega elementos a su dominio en una carga de página.

$(function() { 

    var counter = 0; 

    var intervalId = setInterval(function() { 
     $(document).mouseover() 
    }, 105); 

    var unbind = function() { 

     $(document).off('mousemove', '#label'); 

     $(document).off('mouseover'); 

     window.clearInterval(intervalId); 

    }; 

    $(document).mouseover(function() { 

     $('#label').trigger('mousemove'); 

     counter++; 

     if (jivositecounter > 200) unbind(); 

    }); 

    $(document).on('mousemove', '#label', function() { 
     console.log(counter); 
     ...doing our stuff when #label appears 
     unbind(); 
    }); 

});