javascript - jQuery 求和或相乘值始终没有事件触发

标签 javascript jquery sum blur multiplication

大家好,我有一个动态表(从ajax请求添加行),并且我始终需要求和和乘法值(没有触发事件)。

我已经有一个函数可以使用事件(模糊)来实现它,但我不想通过使用模糊触发器来实现它。

有办法吗?

我的代码:

$.fn.sumValues = function() {
  var sum = 0;
  this.each(function() {
    if ($(this).is(':input')) {
      var val = $(this).val();
    } else {
      var val = $(this).text();
    }
    sum += parseFloat(('0' + val).replace(/[^0-9-\.]/g, ''), 10);
  });
  return sum;
};

function totaliza() {
  var total_recep = $('input[name^="costot"]').sumValues();
  $('#total_art').val(total_recep);
}
var counter = 0;
$(document).on('click', '#bt_add', function(e) {
  counter++;
  var tr = '<tr id="art_' + counter + '">';
  tr = tr + '<td><button name="del_art' + counter + '" id="del_art' + counter + '" class="btn btn-default btn-xs del_art" type="button">DEL</button></td>';
  tr = tr + '<td><input name="cbarra' + counter + '" id="cbarra' + counter + '" class="form-control" value="02020202" readonly></td>';
  tr = tr + '<td><input name="art' + counter + '" id="art' + counter + '" class="form-control" value="ARTICULO" readonly></td>';
  tr = tr + '<td><select name="und' + counter + '" id="und' + counter + '" class="form-control list"></select></td>';
  tr = tr + '<td><input name="cal' + counter + '" id="cant' + counter + '" class="form-control numeric cal" value="0"></td>';
  tr = tr + '<td><input name="cal' + counter + '" id="costou' + counter + '" class="form-control numeric cal" value="0"></td>';
  tr = tr + '<td><input name="costot' + counter + '" id="costot' + counter + '" class="form-control cal" readonly value="0"></td>';
  tr = tr + '</tr>';
  $("#inv_recep_det tbody").append(tr);
  $('.form-control').change(function() {
    var number = this.name.replace('cal', '');
    var costot = ($('#cant' + number).val() * $('#costou' + number).val())
    $('input[name^="costot' + number + '"]').val(costot);
    totaliza();
  });
  $('.del_art').click(function() {
    var number = this.name.replace('del_art', '');
    $('#art_' + number).remove();
    totaliza();
  });
});

https://jsfiddle.net/JuJoGuAl/kpLs9zcg/

类似的事情? http://jsfiddle.net/JuJoGuAl/0vx64u2y/

最佳答案

我认为答案可能会更好,而不是继续发表评论。目前,您使用:

 $(".form-control).change(...)

触发更新。某些浏览器可能会迫使您失去对某个元素的焦点才能真正触发该元素。相反,将该行更改为:

$(".form-control").on("input", function(){ ... })

这已经在这里讨论过:What is the difference between "change" and "input" event for an INPUT element

除此之外,我没有对你的 fiddle 进行任何更改:https://jsfiddle.net/snowMonkey/kpLs9zcg/5/

关于javascript - jQuery 求和或相乘值始终没有事件触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41855915/

相关文章:

javascript - 将一组从ajax返回到JavaScript

jquery - Grails remotefunction用Jquery填充dropdownlist

javascript - jQuery UI 对话框仅在第一次调用时有效

java - 在数组中查找加起来等于给定总和的非重复对

mysql - 查找MySQL中两个表的行数差异

javascript - 在需要访问标题中的文本框的窗口中滚动

javascript - 在 Chrome 中获取伪元素内容

php - Mysql一次查询多个SUM - 新手

javascript - 使用纯 JS 动画更改 CSS 值

javascript - 匹配精确值的 jQuery 选择器