Can anyone help me figure out how to make this script function on image load instead of onclick? I came across the script on stackoverflow, but it was originally set up for onclick. I want it to work for onload or .load
HTML======
<div id="container">
<div class="box">
<h1>B</h1>
<h2>10.35</h2>
</div>
<div class="box">
<h1>A</h1>
<h2>100.05</h2>
</div>
<div class="box">
<h1>D</h1>
<h2>200</h2>
</div>
<div class="box">
<h1>C<h1>
<h2>5,510.25</h2>
</div>
<img src="http://myscot.com/ImagesMain/myscotLogoResp120.jpg" id="numBnt"/>
</div>
JS======
var $divs = $("div.box");
$( "#numBnt" ).load(function() {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h2").text() > $(b).find("h2").text();
});
$("#container").html(numericallyOrderedDivs);
});
CSS======
body {
background: #eee;
font-family: sans-serif;
}
.box {
background: red;
height: 200px;
width: 200px;
}
.box h1 {
color: white;
font-size: 3.5em;
text-align: center;
}
.box h2 {
color: black;
font-size: 2.5em;
text-align: center;
}