jquery .load non sta controllando se il mio elemento è caricato

Question

Ho questo codice

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

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

ho bisogno di fare qualcosa, una volta che è stato caricato div. Attualmente non fa nulla. Quando sostituisco la finestra per "#main_photo_display", funziona. Ho cercato su Google e continuo a leggere. Come verificare se un elemento di pagina è stato caricato.

Answer 1

Non è possibile farlo: gli eventi load non vengono attivati ​​su un elemento HTML, ma solo su quelli che richiedono il caricamento di una risorsa esterna.

Il modo migliore per garantire che l'elemento sia caricato è inserire il tag script dopo di esso nel markup.

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

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

JavaScript non essere eseguito prima della div viene analizzato.

Answer 2

Un semplice div non ha un evento di caricamento tranne quando si carica il contenuto in esso con ajax (che non credo sia ciò che si sta facendo qui). Se il tuo codice si trova fisicamente dopo il div nella tua pagina, il div sarà disponibile e pronto affinché il tuo codice funzioni su di esso (non devi controllare nulla).

Se il codice si trova prima del div nella pagina, quindi è possibile utilizzare il metodo di jQuery .ready() per sapere quando è sicuro di accedere al div:

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

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

Answer 3

Oppure si può eseguire lo script dopo il DOM è pronto in questo modo:

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

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

dispiace Penso che ho letto male :) è necessario questo:

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

Answer 4

L'evento di caricamento viene inviato a un elemento quando questo e tutti i suoi elementi secondari hanno completamente caricato. Questo evento può essere inviato a qualsiasi elemento associato a un URL: immagini, script, frame, iframe e l'oggetto della finestra .

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

Più in basso sulla stessa pagina che affermare:

Non correttamente bolla la struttura DOM

Quindi si puo' t delegare questo evento, il gestore eventi deve essere collegato all'elemento su cui si attiva l'evento load.

Answer 5

Non penso che un DIV attiva un evento caricato. Se all'interno del DIV era presente un'immagine blank.gif, è possibile allegare la funzione $.load().

<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

Ho una soluzione alternativa ed è sciatta (si prega di commentare se si dispone di note).

È utile quando si dispone di un javascript fuori dal proprio controllo che aggiunge elementi a Dom su una pagina caricata.

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

});