获取动态生成的html元素中每个元素的keyup事件

时间:2018-02-24 11:32:49

标签: javascript jquery

对于单个(第一个输入框),我成功获得了keyup事件,但它不适用于我想要计算所有字段总和并希望总计显示它们的每个字段。

我的javascript代码就在这里。

$(document).ready(function(){
    var b = 1;
    $('#mon'+b).keyup(function() {
    alert('Monday');
      $('#mon'+b).each(function(){
          b++;
       });  
    alert(b);
  });
});

enter image description here);

我能够获得像mon,mon1,mon2这样的动态ID。如果我在控制台密钥中触发代码,那么事件就可以了。

$('#mon2').keyup(function() {
    alert('Monday');
});

编辑: -

var b = 1;
alert('Monday');
    $('#mon'+b).each(function(){
        $('#mon'+b).keyup(function() {
            b++;
            alert(b);
        });
    }); 
alert(b);

修改: - 2 https://jsfiddle.net/b71a32qL/8/

3 个答案:

答案 0 :(得分:1)

根据你的js小提琴链接。 你必须进行两次改变,

更改1: - (在输入类型中添加类mon

 <input type="number" step="any" name="mon1" id="mon1" class="mon cell-size" placeholder="mon">

更改2: - 使用以下javascript替换您的javascript。

 $(document).on("keyup",'.mon', function(){
        var sum = 0;   
           alert('Monday');
             $('.mon').each(function(){
              var $value = this.value; 
                if($value){
                       sum+=parseFloat($value);              
                  }
              });    
           $('#mon_total').val(sum);
        });

因此,通过Jquery,您可以使用mon方法对每个类each()进行总计。 请让我知道它的工作与否?

您可以使用ID mon_total更改总计。

答案 1 :(得分:0)

要向动态创建的元素添加事件,请使用

var ele = '#mon'+b;
$(document).on('keyup',ele,function(){
    console.log('Monday');
})

答案 2 :(得分:0)

var b = 1;
$(document).on("keyup",'#mon'+b, function(){       
    alert('Monday');
      $('#mon'+b).each(function(){
          b++;
       });  
    alert(b);
  });