The event that indicates that an item has been loaded is called onload
in the HTML specification and is part of the events that W3C Recommendation calls intrinsic events and they occur when the user agent finishes uploading:
- the window (
window
)
- the document (
document
or DOM)
- windows
frame
that do not have frameset
- the
body
element
The elements div
unlike document
or body
do not have an envento onload
to listen to. And they do not have it because it does not make any sense to have it: when you do this in jQuery:
$(function()
{
console.log( "Todo cargado, el div incluido" );
});
You already have an indicator that the div
has been loaded.
If you still want to simulate a kind of div ready you can:
Use an attribute data
that you would grant to div
and that you would listen to JS.
Here, instead of Hola mundo
, you could even put a function with parameters and execute it with eval
. In addition, it has the advantage of being able to recover other data of the element, such as id
.
$('[data-onload]').each(function() {
var elem = $(this);
var id = elem.prop('id');
var tipo = elem.prop('nodeName');
var txt = (tipo == "DIV") ? elem.text() : elem.val();
var data = elem.data('onload');
alert("Soy el " + tipo + " " + id + " | data: " + data + " | texto: "+txt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar" data-onload="Hola mundo">Lorem ipsum dolor sit amet</div>
<input id="txtNombre" data-onload="enviarInput(this.value)" value="Pedro" />
Another way would be to place the Javascript code you want to run immediately after div
.
Let's see two examples, with a direct code, another calling a function:
<script type="text/javascript">
function onDivReady(msg)
{
alert(msg);
}
</script>
<div id="myDiv"></div>
<script type="text/javascript">
alert("div cargado.... un pseudo div ready");
</script>
<div id="myDiv2"></div>
<script type="text/javascript">
onDivReady("div 2 cargado.... un pseudo div ready con función");
</script>