jquery cannot get value updated dynamically

I updated the value of input on an event and called a function to calculate it. but the function cannot read the inputs value. In the below example i have to caluclate the total when i press the price button. http://jsfiddle.net/LkaA7/4/

// on change of quantity - works
$('.qty').on('change', function(){
    calculate();
});

// on change of price - works
$('.price').on('change', function(){
calculate();
});

// on clicking button - not working
$('p.button').on('click', function(){
    var price = $(this).data('price');
    /*** in my project this val is generated by ajax call  ***/
    $('.price').val(price);
    /***** ******/

    calulate();    
});   

function calculate(){
    var qty = $('.qty'),
        pr = $('.price'),
        tot = $('.total'),
        cal = 0;
    cal = qty.val()*pr.val();
    tot.val(cal);
    return;
}

Answers


Just for fun, I took a slightly different approach. FIDDLE

The price change was switched to .blur. Error checking for numeric input in price was added.

JS

$('.qty').on('change', function(){
    calculate();
});

$('.price').blur(function(){
    calculate();
});

$('.button').on('click', function(){
    calculate();
});

function calculate(){
    var pr = $('.price').val();
    if( isNaN(+pr) )
      { 
        pr = 0;
       }
  var qty = $('.qty').val();
  tot = qty * pr;
  $('.total').val(tot);
}

Need Your Help

How does Array.ForEach() compare to standard for loop in C#?

c# .net performance

I pine for the days when, as a C programmer, I could type:

Catching an exception and returning a custom message

java exception try-catch

So I'm making some school assignments and I have to throw an Exception if the condition between my "if" statement is met.