jquery - How do I add a $( document ).ready() function to this script? -

i tried reading , inserting document function in code have no idea im doing. can tell should put document initialization , why? of great help. thanks.

here's fiddle of jquery for

<script type="text/javascript"> $('.quantity, .drink').change(calculatetotal); function calculatetotal() {     var $form = $(this).closest('form'), total = 0;     $form.find('.drink:checked').each(function() {         total += $(this).data('price') * parseint($(this).next('.quantity').val() || 0, 10);     });      $('#totaldiv').text(total); } </script> 

you wrap whole code in ready function this:

$( document ).ready(function() { $('.quantity, .drink').change(calculatetotal); function calculatetotal() {     var $form = $(this).closest('form'), total = 0;     $form.find('.drink:checked').each(function() {         total += $(this).data('price') * parseint($(this).next('.quantity').val() || 0, 10);     });      $('#totaldiv').text(total); } }); 

we doing because prevents jquery selectors bugging out, firing before actual dom elements loads... resulting in selecting nothing , binding no handlers event.

you solve adding .ready() method document - allowing load before set handlers. alternative way fix delegating handler parent element.

also: change method event hanlding or triggering event on element. can not use in way in script - here doc method: jquery - change method