javascript semi-conflict with 2 scripts

Question

I am having some issues with 2 scripts written in Javascript. Both of these scripts were found here on stack overflow and both of them work perfectly expect one functionallity.

The first script adds a row to my table, rows and cells are added each time i hit a button. These cells basically contain inputs to be submitted into a form

The second script performs calculations between inputs, price, quantity, discount, total...

The firt row of my table is already typed usign html, if a second row is needed than the button is hit, the second script works perfectly on the first row, but once a new row is created the script (calculation script) does not work. It does work on the first row, but never on the others.

It is not a conflict, it is just the the calculation script does not apply to my new rows. Here is the code of both of the script, and my table.

Script creating a row with cells

var index = 1;

function myCreateFunction() {

var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input type='text' id='des" + index + "' name='des' placeholder='' class='form-control input-sm' value=''/>";
cell2.innerHTML = "<input type='text' id='qu" + index + "' name='qu' placeholder='' class='form-control input-sm qu' value=''/>";
cell3.innerHTML = "<input type='text' id='pu" + index + "' name='pu' placeholder='' class='form-control input-sm pu' value=''/>";
cell4.innerHTML = "<input type='text' id='rl" + index + "' name='rl' placeholder='' class='form-control input-sm rl' value=''/>";
cell5.innerHTML = "<input type='text' id='tlht" + index + "' name='tlht' placeholder='' class='form-control input-sm total' value=''/>";
index++;
return false;
}

function myDeleteFunction() {
document.getElementById("myTable").deleteRow(-1);

return false
}

Script doing calculations

$(".pu, .qu, .rl, #vat, #acompte").change(function() {
var row = $(this).closest("tr");
var price = parseFloat($(".pu", row).val());
var quantity = parseInt($(".qu", row).val(), 10);
var discount = parseFloat($(".rl", row).val());
if (price && quantity) {
if (isNaN(discount)) {
    discount = 0;
}
var total = price * quantity * (1 - discount/100);
$(".total", row).val(total.toFixed(2));
} else {
$(".total", row).val("");
}

var grand_total = 0;
$(".total").each(function() {
if (this.value != '') {
  grand_total += parseFloat(this.value);
}
});
grand_total *= (1 + $("#vat").val()/100);
$(".grand_total").val(grand_total.toFixed(2));

var totalht = 0;
 $(".total").each(function() {
if (this.value != '') {
  totalht += parseFloat(this.value);
}
});
$("#totalht").val(totalht.toFixed(2));

var vatis = totalht * $("#vat").val() / 100;
$(".vatis").val(vatis.toFixed(2));

var acpri = grand_total * $("#acompte").val() / 100;
$("#acpri").val(acpri.toFixed(2));
});

And of course the table (note that it's not the full table but a part of it)

<table id="myTable">
 <tr>
   <td width="40%"><center><b>Description</b></center></td>
   <td width="10%"><center><b>Quantité</b></center></td>
   <td width="20%"><center><b>Prix U HT</b></center></td>
   <td width="10%"><center><b>Remise %</b></center></td>
   <td width="20%"><center><b>Total</b></center></td>
</tr>
<tr>
   <td colspan="5"></td>
</tr>
<tr>
  <td width="40%"><input type="text" id="des" name="des" placeholder="" class="form-control input-sm" value=""/></td>
  <td width="10%"><input type="text" id="qu" name="qu" placeholder="" class="form-control input-sm qu" value=""/></td>
  <td width="20%"><input type="text" id="pu" name="pu" placeholder="" class="form-control input-sm pu" value=""/></td>
  <td width="10%"><input type="text" id="rl" name="rl" placeholder="" class="form-control input-sm rl" value=""/></td>
  <td width="20%"><input type="text" id="tlht" name="tlht" placeholder="" class="form-control input-sm total" value=""/></td>
 </tr>                                      
</table>

The contrôle buttons

<button href="#" class="btn btn-lg blue hidden-print margin-bottom-5" onclick="return myCreateFunction()">Ajouter une ligne</button>
<button class="btn btn-lg blue hidden-print margin-bottom-5" onclick="return myDeleteFunction()">Supprimer une ligne</button>

Lots of people contributed for this script, mostly on stack overflow, i am very thankfull for it, i know i must search around, and try my self before i ask, i have done so.

Much thanks for the help.

because you do not add the events to the dynamic elements. The change event is not magically added to the new elements. — epascarello, Dec 29 '14 at 20:12
What you need to know is event binding on dynamically created elements:- http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements ....should help — Neil, Dec 29 '14 at 20:24
Thanks @Neil for the event binding on dynamically created elements. I ran through the problem a second time, after reading multiple times i got it to work. this is v ery good info!!! — Garo, Jan 01 '15 at 17:25

score 0 · Accepted Answer · answered Dec 29 '14 at 20:17

0

You bind the events directly on the elements when the page is loaded. It does not magically hook up the events to the new elements. Use event delegation so you can get the dynamic elements

function doCalculations() {
   /* Put calculation code here */
}

$("#myTable").on("change",".pu, .qu, .rl", doCalculations);
$("#vat, #acompte").on("change", doCalculations);

answered Dec 29 '14 at 20:17

epascarello

204,599
20
195
236

Thank you very much, i know magic and javascript does not go well togheter but i have no education on coding at all. Still i thank you very much for the help. – Garo Dec 29 '14 at 20:29

javascript semi-conflict with 2 scripts

1 Answers1