Fire an event when user move to next input field or release input field

Question

This code is in foreach loop of php

$('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?> + '%' )
        }
      });

this code changes progress-bar as input field changes.

now the problem is that It changes every time when field is changed.

I tried Following Handler of jquery

1. change
2. blur
3. keyup
4. keydown
5. focusout/in

I want to Fire an event when user move to next input field or release input field. I am open to any other suggestions.

Answer 1

If you're trying to add event listener to dynamically generated element, instead of

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

you should use next code:

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

This code is for next html:

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

Where input is dynamically generated element, event is your event (change, blur, etc.)