Jquery javascript ajax - price total not updating - php

Question

So I am trying to get this code below to work with updating a price based on an ajax onclick:
$('#main_body li[data-pricefield="special"]').delegate('onclick','change', function(e)
{
var temp = $(this).attr("id").split('_');
var element_id = temp[1];
var pricedef = $(this).data('pricedef');
if(pricedef == null)
{
pricedef = 0;
}
$("#li_" + element_id).data("pricevalue",pricedef);
calculate_total_payment();
});
Things seem to be working ok so far - when I type in the console:
jQuery('#li_273').data('pricevalue');
I do get a value of "1.00" returned which is actually being set here on the onclick command:
'onclick' => 'jQuery(\'#li_273\').data(\'pricevalue\',\'1.00\');',
My question is what is wrong with my first block of code that is stopping this from calculating the price the right way and how do I correct it?

Answer 1

You are using
$('#main_body li[data-pricefield="special"]').delegate('onclick','change', function(e){
// ...
});
but delegate's syntax is .delegate( selector, eventType, handler(eventObject) ) and in this case you should write
$('#main_body').delegate('li[data-pricefield="special"]','click', function(e){
// ...
});
There is no onclick event in jQuery and AFAIK an li doesn't have a change event so if you want to use multiple events then you can use
$('#main_body').delegate('li[data-pricefield="special"]','click another_event', function(e){
// ...
});
Also you can use on instead of delegate.
An Example and Read more.

Answer 2

'onclick', 'change' should be 'click change' in the delegate
EDIT: "$('#main_body li[data-pricefield="special"]').delegate('li','change', function(e) { actually works when you tab out of the field - it adds the $1 to it."
so you should have:
$('#main_body li[data-pricefield="special"]').on('li','click change', function(e) {
and perhaps check
if(pricedef == undefined || pricedef == null){