JavaScript與2個腳本的半衝突

Question

我在用Javascript編寫的2個腳本中遇到了一些問題。這兩個腳本都是在堆棧溢出中找到的，它們都可以完美地預期一個功能。

第一個腳本向我的表格添加一行，每次按下按鈕時都會添加行和單元格。這些細胞基本上包含輸入提交到表單

第二個腳本進行投入，價格，數量，折扣，總之間的計算...

我的表的firt行已經輸入usign HTML，如果第二行是按鈕被擊中所需要的，第二個腳本在第一行完美工作，但是一旦創建了新行，腳本（計算腳本）就不起作用。它在第一行工作，但從未在其他行上工作。

這不是衝突，它只是計算腳本不適用於我的新行。這是腳本和我的表的代碼。

腳本創建一行與細胞

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 
} 

腳本做計算

$(".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)); 
}); 

當然，表（請注意，這不是完整的表，但一部分它）

<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> 

個

的CONTROLE按鈕

<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> 

很多人貢獻了這個腳本，主要是堆棧溢出，我爲它非常心存感激，我知道我提問之前我必須四處搜尋，並嘗試我的自我，我已經這樣做了。

非常感謝您的幫助。

Answer 1

您可以在加載頁面時直接在元素上綁定事件。它不會神奇地將事件與新元素聯繫起來。使用事件代表團，因此您可以獲得動態元素

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

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