动态输入的javascript函数

Question

我在使用jQuery函数乘法（math）与动态创建的输入（再次使用jQuery创建）时遇到问题。我无法将我的函数绑定到新输入。对于第一行它的工作，但对于第二行它不起作用（第二行和更多使用动态输入）。

这里是我的HTML代码

<table class="table table-condensed" style="margin-left: 10px;">
        <thead>
          <tr>
            <th width="100px">Nama</th>
            <th width="100px">Kode</th>
            <th width="100px">Harga</th>
            <th width="100px">Jumlah</th>
            <th width="100px">Total</th>
            <th width="80px"></th>
          </tr>
        </thead>

        <tbody id='itemlist' >
          <tr>
            <td><input id='nama' name='nama_input[]' class='form-control' /></td>
            <td><input id='kode' readonly name='kode_input[]' class='form-control' /></td>
            <td><input id='harga' name='harga_input[]' class='form-control' onkeyup="sum();" /></td>
            <td><input id='jumlah' autocomplete="off" name='jumlah_input[]' class='form-control' onkeyup="sum();" /></td>
            <td><input id='total' name='total_input[]' class='form-control' value=" " /></td>
            <td></td>
          </tr>
        </tbody>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <button type="button" class="btn btn-default" onclick="additem(); return false">
              <b>Tambah</b>
            </button>
          </td>
        </tr>
      </table>

这是我的剧本

function additem() { 


//menentukan target append
var itemlist = document.getElementById('itemlist');

//                membuat element
var row = document.createElement('tr');
var nama = document.createElement('td');
var kode = document.createElement('td');
var harga = document.createElement('td');
var jumlah = document.createElement('td');
var total = document.createElement('td');
var aksi = document.createElement('td');


//                meng append element
itemlist.appendChild(row);
row.appendChild(nama);
row.appendChild(kode);
row.appendChild(harga);
row.appendChild(jumlah);
row.appendChild(total);
row.appendChild(aksi);

//                membuat element input1
var nama_input = document.createElement('input');
nama_input.setAttribute('name', 'nama_input[]');
nama_input.setAttribute('class', 'form-control');

var kode_input = document.createElement('input');
kode_input.setAttribute('name', 'kode_input[]');
kode_input.setAttribute('readonly', '');
kode_input.setAttribute('class', 'form-control');

var harga_input = document.createElement('input');
harga_input.setAttribute('name', 'harga_input[]');
harga_input.setAttribute('class', 'form-control');
harga_input.setAttribute('onkeyup', 'sum();');


var jumlah_input = document.createElement('input');
jumlah_input.setAttribute('name', 'jumlah_input[]');
jumlah_input.setAttribute('class', 'form-control');
jumlah_input.setAttribute('autocomplete', 'off');
jumlah_input.setAttribute('onkeyup', 'sum();');


var total_input = document.createElement('input');
total_input.setAttribute('name', 'total_input[]');
total_input.setAttribute('class', 'form-control');
total_input.setAttribute('readonly', '');

var hapus = document.createElement('span');

//                meng append element input
nama.appendChild(nama_input);
kode.appendChild(kode_input);
harga.appendChild(harga_input);
jumlah.appendChild(jumlah_input);
total.appendChild(total_input);
aksi.appendChild(hapus);

hapus.innerHTML = '<button class="btn btn-small btn-default"><b>Hapus</b></button>';
//                membuat aksi delete element
hapus.onclick = function () {
  row.parentNode.removeChild(row);
};


var namaid = 'nama' + (Math.floor((1 + Math.random()) * 0x10000));
var kodeid = 'kode' + (Math.floor((1 + Math.random()) * 0x10000));
var hargaid = 'harga' + (Math.floor((1 + Math.random()) * 0x10000));
var jumlahid = 'jumlah' + (Math.floor((1 + Math.random()) * 0x10000));
var totalid = 'total' + (Math.floor((1 + Math.random()) * 0x10000));
nama_input.setAttribute('id', namaid);
kode_input.setAttribute('id', kodeid);
harga_input.setAttribute('id', hargaid);
jumlah_input.setAttribute('id', jumlahid);
total_input.setAttribute('id', totalid); 

function sum() {
          var hrg = document.getElementById('hargaid').value;
          var jml = document.getElementById('jumlahid').value;
          var result = parseInt(hrg) * parseInt(jml);
          if (!isNaN(result)) {
           document.getElementById('totalid').value = result;
         }
       }

$("#" + namaid).autocomplete({
  source: "get_barang.php",
  minLength: 2,
  select: function(event, ui) {
    $("#" + kodeid).val(ui.item.kode);
    $("#" + hargaid).val(ui.item.harga);
  }
});



i++;

}

感谢任何帮助。

Answer 1

您没有将当前输入的id传递给sum方法。还有一件事是将jquery onkeyup事件添加到动态输入中。请参考以下代码 -

 $(function() {
   $('#sample').on('click',additem)
    $( "#nama" ).autocomplete({
      source: "get_barang.php",
      minLength: 2,
      select: function( event, ui ) {
        $('#kode').val(ui.item.kode);
        $('#harga').val(ui.item.harga);
      }
    });
  });

function sum() {
              var hrg = document.getElementById('harga').value;
              var jml = document.getElementById('jumlah').value;
              var result = parseInt(hrg) * parseInt(jml);
              if (!isNaN(result)) {
               document.getElementById('total').value = result;
             }
           }

  var i = 1;

  function additem() { 


    //menentukan target append
    var itemlist = document.getElementById('itemlist');

    //                membuat element
    var row = document.createElement('tr');
    var nama = document.createElement('td');
    var kode = document.createElement('td');
    var harga = document.createElement('td');
    var jumlah = document.createElement('td');
    var total = document.createElement('td');
    var aksi = document.createElement('td');


    //                meng append element
    itemlist.appendChild(row);
    row.appendChild(nama);
    row.appendChild(kode);
    row.appendChild(harga);
    row.appendChild(jumlah);
    row.appendChild(total);
    row.appendChild(aksi);

    //                membuat element input1
    var nama_input = document.createElement('input');
    /*nama_input.setAttribute('id', 'nama');*/
    nama_input.setAttribute('name', 'nama_input[]');
    nama_input.setAttribute('class', 'form-control');

    var kode_input = document.createElement('input');
   /* kode_input.setAttribute('id', 'kode1');*/
    kode_input.setAttribute('name', 'kode_input[]');
    kode_input.setAttribute('readonly', '');
    kode_input.setAttribute('class', 'form-control');

    var harga_input = document.createElement('input');
    harga_input.setAttribute('name', 'harga_input[]');
    harga_input.setAttribute('class', 'form-control');
    //harga_input.setAttribute('onkeyup', 'sum();');
    

    var jumlah_input = document.createElement('input');
    jumlah_input.setAttribute('name', 'jumlah_input[]');
    jumlah_input.setAttribute('class', 'form-control');
    //jumlah_input.setAttribute('onkeyup', 'sum();');
    

    var total_input = document.createElement('input');
    total_input.setAttribute('name', 'total_input[]');
    total_input.setAttribute('class', 'form-control');

    var hapus = document.createElement('span');

    //                meng append element input
    nama.appendChild(nama_input);
    kode.appendChild(kode_input);
    harga.appendChild(harga_input);
    jumlah.appendChild(jumlah_input);
    total.appendChild(total_input);
    aksi.appendChild(hapus);

    hapus.innerHTML = '<button class="btn btn-small btn-default"><b>Hapus</b></button>';
    //                membuat aksi delete element
    hapus.onclick = function () {
      row.parentNode.removeChild(row);
    };


    var namaid = 'nama' + (Math.floor((1 + Math.random()) * 0x10000));
    var kodeid = 'kode' + (Math.floor((1 + Math.random()) * 0x10000));
    var hargaid = 'harga' + (Math.floor((1 + Math.random()) * 0x10000));
    var jumlahid = 'jumlah' + (Math.floor((1 + Math.random()) * 0x10000));
    var totalid = 'total' + (Math.floor((1 + Math.random()) * 0x10000));
    nama_input.setAttribute('id', namaid);
    kode_input.setAttribute('id', kodeid);
    harga_input.setAttribute('id', hargaid);
   
    jumlah_input.setAttribute('id', jumlahid);
    total_input.setAttribute('id', totalid); 
      
    // harga_input.setAttribute("onkeyup", "sum("+hargaid+","+jumlahid+","+totalid+")");
//  jumlah_input.setAttribute("onkeyup", "sum("+hargaid+","+jumlahid+","+totalid+")");
     $(jumlah_input).on('keyup',function(){
    
      sum(hargaid,jumlahid,totalid)
    })
    $(harga_input).on('keyup',function(){
    
      sum(hargaid,jumlahid,totalid)
    })
    function sum(hargaid,jumlahid,totalid) {
              var hrg = document.getElementById(hargaid).value;
              var jml = document.getElementById(jumlahid).value;
              var result = parseInt(hrg) * parseInt(jml);
              if (!isNaN(result)) {
               document.getElementById(totalid).value = result;
             }
           }

    $("#" + namaid).autocomplete({
      source: "get_barang.php",
      minLength: 2,
      select: function(event, ui) {
        $("#" + kodeid).val(ui.item.kode);
        $("#" + hargaid).val(ui.item.harga);
      }
    });



    i++;

  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table class="table table-condensed" style="margin-left: 10px;">
        <thead>
          <tr>
            <th width="100px">Nama</th>
            <th width="100px">Kode</th>
            <th width="100px">Harga</th>
            <th width="100px">Jumlah</th>
            <th width="100px">Total</th>
            <th width="80px"></th>
          </tr>
        </thead>

        <tbody id='itemlist' >
          <tr>
            <td><input id='nama' name='nama_input[]' class='form-control' /></td>
            <td><input id='kode' readonly name='kode_input[]' class='form-control' /></td>
            <td><input id='harga' name='harga_input[]' class='form-control' onkeyup="sum();" /></td>
            <td><input id='jumlah' autocomplete="off" name='jumlah_input[]' class='form-control' onkeyup="sum();" /></td>
            <td><input id='total' name='total_input[]' class='form-control' value=" " /></td>
            <td></td>
          </tr>
        </tbody>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <button type="button" id="sample" class="btn btn-default">
              <b>Tambah</b>
            </button>
          </td>
        </tr>
      </table>

Answer 2

以下是示例，请尝试此

＆＃13;

＆＃13;

 $(function() {
   $(document).on('click', '.btn-remove', function() {
     // remove closest row on click of remove button
     $(this).closest('tr').remove();
   });

   $(document).on('input', 'input.harga,input.jumlah', function() {
     var hrg = $(this).closest("tr").find('input.harga').val();
     var jml = $(this).closest("tr").find('input.jumlah').val();
     var result = parseInt(hrg) * parseInt(jml);
     if (!isNaN(result)) {
       $(this).closest("tr").find('input.total').val(result);
     }
   })
 });


 function additem() {

   var rowHtml = '<tr>' +
     '<td><input name="nama_input[]" class="nama form-control" /></td>' +
     '<td><input readonly name="kode_input[]" class="kode form-control" /></td>' +
     '<td><input name="harga_input[]" class="harga form-control" /></td>' +
     '<td><input autocomplete="off" name="jumlah_input[]" class="jumlah form-control" /></td>' +
     '<td><input name="total_input[]" class="total form-control" /></td>' +
     '<td><button class="btn btn-small btn-default btn-remove"><b>Hapus</b></button></td>' +
     '</tr>';


   $('#itemlist').append(rowHtml);
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed" style="margin-left: 10px;">
  <thead>
    <tr>
      <th width="100px">Nama</th>
      <th width="100px">Kode</th>
      <th width="100px">Harga</th>
      <th width="100px">Jumlah</th>
      <th width="100px">Total</th>
      <th width="80px"></th>
    </tr>
  </thead>

  <tbody id='itemlist'>
    <tr>
      <td>
        <input name="nama_input[]" class="nama form-control" />
      </td>
      <td>
        <input readonly name="kode_input[]" class="kode form-control" />
      </td>
      <td>
        <input name="harga_input[]" class="harga form-control" />
      </td>
      <td>
        <input autocomplete="off" name="jumlah_input[]" class="jumlah form-control" />
      </td>
      <td>
        <input name="total_input[]" class="total form-control" />
      </td>
      <td></td>
    </tr>
  </tbody>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <button type="button" class="btn btn-default" onclick="additem();
                            return false">
        <b>Tambah</b>
      </button>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

我希望它会有所帮助