当用户移动到下一个输入字段或释放输入字段时触发事件

Question

这段代码在php的foreach循环中

$('input[name="<?=$value?>"]').on('change',function(){
        spanval = $(".formscore").text();
        width = $(".formProgressbar").width() / $('.formProgressbar').parent().width() * 100;
        width = Math.round(width);
        var currentval = $(this).val();
        if(currentval != ''){
          $(".formscore").text(parseInt(spanval) + <?=$sql123->score?> + '%' )
          $(".formProgressbar").width(parseInt(width) +  <?=$sql123->score?> + '%' )
        }else{
          $(".formscore").text(parseInt(spanval) - <?=$sql123->score?> + '%' )
          $(".formProgressbar").width(parseInt(width) -  <?=$sql123->score?> + '%' )
        }
      });

此代码会随着输入字段的变化而更改进度条。

现在的问题是每次更改字段时都会更改。

我尝试了关注 jquery 的处理程序

1. 改变
2. 模糊
3. 键位
4. 按键
5. 聚焦/聚焦

我想在用户移动到下一个输入字段或释放输入字段时触发一个事件。我愿意接受任何其他建议。

Answer 1

如果您尝试将事件侦听器添加到动态生成的元素，而不是

$('input').on(event, function(e){
  // won't work for dynamically generated element
});

你应该使用下一个代码：

$('form').on(event, 'input', function(e){
  // will work for dynamically generated element
});

此代码用于下一个 html：

<form>
  <input type="text" name="">
</form>

其中input 是动态生成的元素，event 是您的事件（change、blur 等）

Answer 2

$('input[name="<?=$value?>"]').on('blur',function(e){
  //Do something
});

Answer 3

当用户触发模糊事件时，您可能应该在输入中添加一个类。然后使用这个类来阻塞事件的下一次触发。

（你也可以使用jQuery的.data () method代替类）

或者更好的是，使用由模糊事件触发的每个循环来计算所有填充的输入以增加或减少进度条。

见JS fiddle example

var total = $('input').length
$('input').on('blur', function() {
  var counter = 0;
  $('input').each(function() {
    if($(this).val()) {
    counter += 1;
    }

  })
  console.log('Progress : '+counter+'/'+total+'. Percent : ' + (counter*100/total)+ '%')
})