Question

I have this bit of code – works perfectly

$('.canti,.precio').change(function() {
 var total = 0;
 var $item = $(this).parent();
 var canti = $item.find(".canti").val();
 var precio = $item.find(".precio").val();  
 total = parseFloat(canti * precio); 
 $item.find(".subto").attr("value", total); 
});

it makes calculations based on a field set

<fieldset class="item">
<input name="item[]" type"text" value="" />
<input class="canti" name="cantidad[]" type"text" value="" />
<input class="precio" name="preciounitario[]" type"text" value="" />
<input class="subto" name="importe[]" type"text"value="" readonly="readonly"/>
</fieldset> 

I had multiple actual fieldsets and it worked perfectly. However rather than initially having X fieldsets I wanted the user to be able to add as they required, so wrote this:

var newFieldset='<fieldset class="item"><input name="item[]" type"text" value="" /><input class="canti" name="cantidad[]" type"text"  value="" /><input class="precio" name="preciounitario[]" type"text"  value="" /><input class="subto" name="importe[]" type"text"value="" readonly="readonly"/></fieldset>'
$(".add").click(function(){
    $(".add").before(newFieldset);
});

Again – works perfectly and adds in a new fieldset BUT the calculations on the .canti and .precio items in the new “virtual” fieldsets don’t do anything.

Any ideas? Is what I’m hoping to do even possible?

There’s a more complete version at http://www.cristalyaluminiodiestro.com/estimate-create-testing

Answer 1

Need to delegate the Event

You can use the jQuery .on() method

$('body').on('change','.canti,.precio' ,function() {

That is because the way you are adding the events will not work for dynamically created elements

‘body’ can be replaced with the closest static parent container..