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.