OnBlur does not work on dynamic inputs?

Navigation
1

I am making a system where it loads the inputs according to the selection of select , but since they are dynamic it is not working, what I need is when I select as payment method check, the inputs that are loaded load the same information in the following sparing the user to register each installment, following 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><tableid="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>
    
asked by anonymous 18.09.2017 / 21:13

1 answer

3

It does work, but you have to use delegation.

You can use document as the backup or the closest parent that is not dynamic relative to the code reading time: 

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

You can read more about delegation here at question and answers .

    
18.09.2017 / 21:16
Help with sum Drop Inventory with SQL Triggers