javascript - 使用 oninput 事件克隆 html 表单

Question

我有一个类似下面的脚本:

<script src="jquery.min.js"></script>
<script>
$(function () {
$('#btnAdd').click(function () {
    var num     = $('.clonedInput').length, 
        newNum  = new Number(num + 1), 
        newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); 
    newElem.find('.input_1').attr('id', 'ID' + newNum + '_a').attr('name', 'ID' + newNum + '_a').val('1');
    newElem.find('.input_2').attr('id', 'ID' + newNum + '_b').attr('name', 'ID' + newNum + '_b').val('1');
    newElem.find('.output_1').attr('id', 'ID' + newNum + '_o').attr('name', 'ID' + newNum + '_o').val('');
    $('#entry' + num).after(newElem);
    $('#ID' + newNum + '_title').focus();
});
});
</script>

<form action="#" id="form" oninput="o.value = parseInt(a.value) * parseInt(b.value)">
<div id="entry1" class="clonedInput">
    <input class="input_1" name="a" type="text" value="1"> *
    <input class="input_2" name="b" type="text" value="1"> =
    <output class="output_1" name="o"></output>
</div>
</form>
<input type="button" id="btnAdd" value="add row">

如果执行这些代码，第一行的数字相乘的结果将自动正确给出。但是如果添加行(即第二行等)，则两个条目之间的乘法不会自动运行。我的脚本有错误吗？

Answer 1

您应该更改您的输入事件处理程序。您可以使用名为 updateChange 的函数来读取和更新新节点的值。

我首先更改了您的 id entry1，因为您在新条目中使用了这个名称。这不会影响您的问题。

<form action="#" id="form">
    <div id="entry1" class="clonedInput">
        <input class="input_1" id="ID1_a" type="text" value="1"> *
        <input class="input_2" id="ID1_b" type="text" value="1"> =
        <output class="output_1" id="ID1_o"></output>
    </div>
</form>
<input type="button" id="btnAdd" value="add row">

JS

我创建了一个函数 updatechange，它在触发 input 事件 时读取您的输入并更新 output。

$(function() {
   function updateChange() {
     var childNodes = this.children;
     var childNodesLen = this.children.length;
     var i=0;
     var inputs,outputs;
     for (;i<childNodesLen;i++){
       inputs = childNodes[i].getElementsByTagName('input');
       outputs = childNodes[i].getElementsByTagName('output');
       outputs[0].value = parseInt(inputs[0].value) * parseInt(inputs[1].value);
     }
  };
  document.getElementById('form').addEventListener('input',updateChange);    

$('#btnAdd').click(function() {
  var num = $('.clonedInput').length,
   newNum = new Number(num + 1),
   newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow');
   newElem.find('.input_1').attr('id', 'ID' + newNum + '_a').attr('name', 'ID' + newNum + '_a').val('1');
   newElem.find('.input_2').attr('id', 'ID' + newNum + '_b').attr('name', 'ID' + newNum + '_b').val('1');
   newElem.find('.output_1').attr('id', 'ID' + newNum + '_o').attr('name', 'ID' + newNum + '_o').val('');
   $('#entry' + num).after(newElem);
   $('#ID' + newNum + '_title').focus();
  });
 });

我建议您使用纯 JavaScript 来操作您的 DOM。使用 jQuery 也同样容易 ;-)