i want to execute some functions only after a dynamically created DIV's content (which will includes text and images) is loaded completely. Here the dynamically created DIV is "#element"+data.
The below is not working.
$("#section"+currSect).delegate( "#element"+data, "load", function()
{ remvPanel(); showFormBox(); }
);
This also not working.
$("#element"+data).load(function() {remvPanel(); showFormBox();});
Please Help! :(
Will this do it?
jQuery .load()
This method is a shortcut for .bind('load', handler).
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
For example, consider a page with a simple image:
<img src="book.png" alt="Book" id="book" />
The event handler can be bound to the image:
$('#book').load(function() {
// Handler for .load() called.
});
A working example:
<head>
<title></title>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$div = $("#main");
// get loaded alert
$img = $("<img src='https://www.google.com/images/srpr/logo3w.png' />");
// no loaded alert
// $img = $("<img src='not a valid image' />");
$img.load(function () {
alert("loaded");
});
$div.append($img);
});
</script>
</head>
<body>
<div id="main">
</div>
</body>