Doesn’t Onblur work on dynamic inputs?

Question

I’m making a system where it loads the inputs as selection select, but as they are dynamic is not working, what I need is when selecting as payment check, the inputs that are loaded load the same information in the following saving the user to register each installment, follows example:

var selects = $("#table_com_parcelas select");
var index = null;
var valor = null;
var qtde = selects.length;
selects.on('change', function() {
  var valor = this.value;
  indice = selects.index(this);
  selects.each(function(index) {
    if (index > indice) {
      $(this).val(valor);
      if (valor === '3' && index > indice) {
        $('.form-full-' + index).html(insert_inputs_boleto(index));
        $('.form-full-' + qtde).html(insert_inputs_boleto(qtde));
      } else if (valor === '5') {
        $('.form-full-' + index).html(insert_inputs_docted(index));
        $('.form-full-' + qtde).html(insert_inputs_docted(qtde));
      } else if (valor === '1' || valor === '2' || valor === '4') {
        $('.form-full-' + index).empty();
        $('.form-full-' + qtde).empty();
      }
    }
  });
});

function insere_option() {
  var options = "";
  options += "<option value=''>Selecione</option>";
  options += "<option value='1'>Boleto</option>";
  options += "<option value='2'>Cartão</option>";
  options += "<option value='3'>Cheque</option>";
  options += "<option value='4'>Dinheiro</option>";
  options += "<option value='5'>Transferência</option>";
  return options;
}

function insert_inputs_boleto(id) {
  var inputs_boleto = "";
  inputs_boleto += "<input name=\"banco\" type=\"text\" class=\"form-control\" id=\"banco-" + id + "\" placeholder=\"Banco\">";
  inputs_boleto += "<input name=\"agencia\" type=\"text\" class=\"form-control\" id=\"agencia-" + id + "\" placeholder=\"Agencia\">";
  inputs_boleto += "<input name=\"conta\" type=\"text\" class=\"form-control\" id=\"conta-" + id + "\" placeholder=\"Conta\">";
  inputs_boleto += "<input name=\"cheque\" type=\"text\" class=\"form-control\" id=\"ncheque-" + id + "\" placeholder=\"Nº Cheque\">";
  return inputs_boleto;
}

function insert_inputs_docted(val) {
  var selects = '<select>';
  selects += '<option value="1">Bradesco</option>';
  selects += '<option value="2">BB</option>';
  selects += '<option value="3">Caixa</option>';
  selects += '</select>';
  return selects;
}

$('#banco-1').on('blur', function() {
  alert('aqui');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_com_parcelas" class="table table-condensed table-hover table-responsive table-striped">
  <thead>
    <tr>
      <th class="align">Parcela</th>
      <th class="align">Vencimento</th>
      <th class="align">Valor</th>
      <th class="align">Forma pagamento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align">1 de 4</td>
      <td class="align">13/10/2017</td>
      <td class="align">R$ 2.886,20</td>
      <td class="align">
        <div class="form-inline"><select class="form-control" id="select-1"><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
          <span class="form-full-1"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align">2 de 4</td>
      <td class="align">13/11/2017</td>
      <td class="align">R$ 2.886,20</td>
      <td class="align">
        <div class="form-inline"><select class="form-control" id="select-2"><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
          <span class="form-full-2"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align">3 de 4</td>
      <td class="align">13/12/2017</td>
      <td class="align">R$ 2.886,20</td>
      <td class="align">
        <div class="form-inline"><select class="form-control" id="select-3"><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
          <span class="form-full-3"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align">4 de 4</td>
      <td class="align">13/01/2018</td>
      <td class="align">R$ 2.886,20</td>
      <td class="align">
        <div class="form-inline"><select class="form-control" id="select-4"><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
          <span class="form-full-4"></span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Yes it works, but you have to use delegation.

You can use the document as backup or the nearest parent element that is not dynamic in relation to the time of reading of the code:

$(document).on('blur', '#banco-1', function() {
  alert('aqui');
});

You can read more about delegation here question and answers.