使用 JQuery 将动态创建的输入字段中的值相乘

Question

我正在使用 JQuery 来动态创建表行。每行包含 3 个文本字段。当用户在文本字段中键入时，表格行被克隆，并根据需要添加多行。一切正常。

数值被输入到前 2 个字段中，它们相乘。输出自动出现在第三个文本框中。由于输入字段是克隆，我不能使用 getElementById 来运行函数并将值相乘。

有人告诉我使用onchange 使用父兄弟姐妹，但我不知道该怎么做。谁能举个例子？

这是我在 JS Fiddle 中的代码示例：https://jsfiddle.net/mzctb778/

Answer 1

由于您是动态添加内容，因此您应该使用事件委托来侦听更改事件。通过将其附加到桌子上来做到这一点。所以听一下输入的变化。检测到更改后，通过查找 DOM 获取行并选择需要相乘的输入。由于 id 必须是唯一的，因此您不能使用它们，因此请使用类来引用元素。

$("table").on("change", "input", function () {  //use event delegation
  var tableRow = $(this).closest("tr");  //from input find row
  var one = Number(tableRow.find(".one").val());  //get first textbox
  var two = Number(tableRow.find(".two").val());  //get second textbox
  var total = one * two;  //calculate total
  tableRow.find(".three").val(total);  //set value
});

$("button.add").on("click", function() {
   var tbody = $("table tbody");
   tbody.find("tr:eq(0)").clone().appendTo(tbody).find("input").val("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td><input class="one" /></td>
      <td><input class="two" /></td>
      <td><input class="three" readonly="readonly"/></td>
    </tr>
  </tbody>
</table>

<button class="add">Add</button>

Answer 2

将此添加到您的脚本中，它将执行您想要的计算：

$("table select").on("change", function(){
var x=$(this).find(":selected").val();
var y=$(this).closest("td").siblings().find(":selected").val();
$(this).closest("td").siblings().find("input").val(x*y);
});

New JS Fiddle