Trouble with a jQuery blur form event

Trouble with a jQuery blur form event

Here's the page in question:


See how it says " Starts at $6,999.00"?

Next choose any of the options from the dropdown menu.

Notice how the price doesn't change?

Now click anywhere outside of the select dropdown box and watch the price update to what it should be.

That's not how it should be. What should happen is the price should update as soon as you select a new option from the dropdown menu. In other words, you shouldn't have to click somewhere else on the page to have the price update.

I've copied and pasted the code below that is responsible for this change. Maybe someone can tell me what I am doing wrong here. It's driving me mad.

Thanks in advance, I truly appreciate it!
       
  3.         <style>
  4.             div.woocommerce-variation-price,
  5.             div.woocommerce-variation-availability,
  6.             div.hidden-variable-price {
  7.                 height: 0px !important;
  8.                 overflow:hidden;
  9.                 position:relative;
  10.                 line-height: 0px !important;
  11.                 font-size: 0% !important;
  12.             }
  13. </style>

  15.  <script>
  16.         jQuery(document).ready(function($) {
  17.             $('select').blur( function(){
  18.                 if( '' != $('input.variation_id').val() ){
  19.                     $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
  20.                     console.log($('input.variation_id').val());
  21.                 } else {
  22.                     $('p.price').html($('div.hidden-variable-price').html());
  23.                     if($('p.availability'))
  24.                         $('p.availability').remove();
  25.                     console.log('NULL');
  26.                 }
  27.             });
  28.         });
  29.         </script>