JQuery // After delete id event not trigger -

i have datagrid have cell quantity , 1 price label @ end showing result (price * qty). that's work perfectly. can delete row , thats when stop working.

this code

http://jsfiddle.net/bizonbytes/sywpy/24/

to replicate problem:

1. enter numbers in each rows (you see result of price * qty)
2. then delete row 2
3. now go row 1 , change value , see result if on row 3 won't work

so question why row 3 stop working.

as business req need rename id's 1 , 2 , not leaving them 1 , 3

html is:

<div class="row_table row_service_table" id="service_row_1">     <div class="cell celldata cell_service_data"><input type="text" class="quantity_row" id="quantity_row_1" rel="1"/></div>     <div class="cell celldata cell_service_data"><input type="text" class="price_row" id="price_row_1" rel="1"/></div>     <div class="cell celldata cell_service_data"><a href="javascript:void(0)" class="delete_service_row" id="delete_service_row_1" rel="1">delete row 1</a></div>     <div class="cell celldata cell_service_data">result row 1=<span id="total_1"></span></div> </div>  etc. 

javascript:

$(".delete_service_row").click(function(){     var rowid = $(this).attr('rel');      $('#service_row_' + rowid).remove();      // iterates through each of elements matched selector     $('.row_service_table').each(         // represents index of each of elements         function(i){               // sets id of each of returned elements               // string concatenated expression 'i + 1'             this.id = 'service_row_' + (i+1);              $(this).children('.cell_service_data').children('.quantity_row').attr('id', 'quantity_row_' + (i+1));             $(this).children('.cell_service_data').children('.quantity_row').attr('rel', (i+1));             $(this).children('.cell_service_data').children('.quantity_row').attr('name', 'quantity_row_' + (i+1));              $(this).children('.cell_service_data').children('.price_row').attr('id', 'price_row_' + (i+1));             $(this).children('.cell_service_data').children('.price_row').attr('rel', (i+1));             $(this).children('.cell_service_data').children('.price_row').attr('name', 'price_row_' + (i+1));       }); });  $('.quantity_row,.price_row').live('change', function(){     var rowid = $(this).attr('rel');      // lets update total line     var total = parsefloat($('#quantity_row_' + rowid).val()) * parseint($('#price_row_' + rowid).val());     $('#total_' + rowid).text(total); }); 

you're remapping ids , rels of 2 inputs, leaving id of result span untouched! (also not changing text of containing div.)

see fiddle renumbers everything.

the changes were:

1. added <span class="rezlabel"> results row , gave result-value span class of rezvalue.

2. changed renumbering code to:

   $('.row_service_table').each (     // represents index of each of elements     function(i){           // sets id of each of returned elements           // string concatenated expression 'i + 1'         this.id         = 'service_row_' + (i+1);         var basenode    = $(this).children('.cell_service_data');          basenode.children('.quantity_row').attr('id', 'quantity_row_' + (i+1));         basenode.children('.quantity_row').attr('rel', (i+1));         basenode.children('.quantity_row').attr('name', 'quantity_row_' + (i+1));          basenode.children('.price_row').attr('id', 'price_row_' + (i+1));         basenode.children('.price_row').attr('rel', (i+1));         basenode.children('.price_row').attr('name', 'price_row_' + (i+1));          basenode.children('a').text('delete row ' + (i+1));         basenode.children('a').attr('id', 'delete_service_row_' + (i+1));         basenode.children('a').attr('rel', (i+1));          basenode.children('.rezlabel').text('result row ' + (i+1) + ' = ');         basenode.children('.rezvalue').attr('id', 'total_' + (i+1)); } );