javascript - 将两项相乘，结果在第三项中自行生成

Question

当我将两个元素相乘时，结果在第三个输入框中生成，但问题是当我在单击添加按钮时再添加一行时，这个相乘不起作用..我想在添加下一行时它也可以工作并且也想接下来的折扣代码.........请帮助我，因为这是我的元素中产生的问题，我的工作停止了HTML

var maxID = 0;
    function getTemplateRow() {
    var x = document.getElementById("templateRow").cloneNode(true);
    x.id = "";
    x.style.display = "";
    x.innerHTML = x.innerHTML.replace(/{id}/, ++maxID);
    return x;
    }
    function addRow(btn) {
    var t = document.getElementById("theTable");
    var rows = t.getElementsByTagName("tr");
    var r = rows[rows.length - 1];
    r.parentNode.insertBefore(getTemplateRow(), r);

    }
    function update(){
    var price = document.getElementById("Uprice").value;
    var quantity = document.getElementById("quantity").value;
    var Tprice = price * quantity ;

    document.getElementById("Totprice").value = Tprice;
    }
    function removeRow(btn) {
      var row = btn.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }

th{
border: 3px 3px 3px 3px green;
position: relative;
background-color: green;
color: white;
width: 300px;

}

<table id="theTable">
    <tr>
    <th>id</th>
    <th>name</th>
    <th>id</th>
    <th>name</th>
    <th>id</th>
    <th>name</th>
    <th>id</th>
    <th>name</th>
    <th>name</th>

    </tr>
    <tr>
    <td><input type="" name=""></td>
    <td><input type="" name=""></td>
    <td><input type="" name=""></td>
    <td><input type="" name=""></td>
    <td><input type="" name=""></td>
    <td><input type="" name=""></td>


    </tr>
    <button onclick="addRow();">add</button>
    <tr id="templateRow" style="display:none;">
    <!--<td>{id}</td>-->
    <td><input /></td>
    <td><input type="" name="">
        <!--<select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>-->
    </td>
    <td><input id = "Uprice"/></td>
    <td><input id = "quantity" onChange="update()"/></td>
    <td><input id = "Totprice" readonly=""/></td>
    <td><input /></td>
    <td><input /></td>
    <td><input /></td>
    <td><button  onclick="removeRow(this);">delete</button></td>

    </tr>
</table>

Answer 1

问题是更新函数绑定(bind)到当前 DOM 元素，而不是新元素。所以，重新绑定(bind) update function到新添加的元素。

To do that you can simply reinitialize your update function and call it as per your appropriate trigger or you can even destroy it and reinitialize it but make sure you have your triggers in proper place .