input inserted with "append" is not "recognized"

Question

I’m trying to make a slightly more dynamic form! But when adding new inputs with the append javascript, the same is not recognized. And the effect is not realized.

The effect in question is the restatement of text typed in input A_1 in input A_2.

The recognized inputs that accept this effect, are only the inputs that are inserted directly in the code, without the append.

Here’s the code working :: http://jsfiddle.net/3egeefex/

Answer 1

Ivan, when you bind an event to a jQuery object, it will apply only to the elements contained in the object at that time.

Remember that adding a new element will not update the previously obtained object collections unless you do so manually.

in this case you have two options, the first is simpler, but can have the performance a little lower than the second, in this case you will use the .on() in the object containing all blocks.

var bloco = $(".bloco");
var relatorio = $(".relatorio");
var novo = $(".novo");
var source = $("#tmplBloco").html();

var tmplBloco = Handlebars.compile(source);
var tmplCaptute = Handlebars.compile("Você digitou <b>{{valor}}</b> no bloco :: <b>{{name}}</b><br>");
var tmplRelatorio = Handlebars.compile("Você acrescentou um novo bloco. Numeração :: <b>{{position}}</b><br>");

novo.click(function(){
  var model = {};
  model.indice = $(".sub_bloco", bloco).length;
  model.position = model.indice + 1;

  var novo_bloco = $.parseHTML(tmplBloco(model));  
  bloco.append(novo_bloco);

  var novo_relatorio = $.parseHTML(tmplRelatorio(model));  
  relatorio.append(novo_relatorio);
})

bloco.on("keyup", ".capturar", function(){
  var capturar = $(this);
  var exibir = capturar.siblings(".exibir").first();

  var model = { valor: capturar.val(), name: capturar.attr('name') };
  var novo_relatorio = $.parseHTML(tmplCaptute(model));  
  relatorio.append(novo_relatorio);

  exibir.val(model.valor);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<h4>
  Ao digitar no 1º e 2º input, ele reexibi o texto digitado no input ao lado. Porém após acrescentar o 3º input esse efeito já não entra mais em atividade. Parece que a div e seu conteudo não é reconhecida
</h4>

<form action="" method="post">
  <div class="bloco">
    <div class="sub_bloco">
      <input type="text" name="0_capturar" class="capturar" placeholder="1º input"/>
      <input type="text" name="0_exibir" class="exibir" placeholder="Reexibição do 1º input" />
    </div> 
    <div class="sub_bloco">
      <input type="text" name="1_capturar" class="capturar" placeholder="2º input"/>
      <input type="text" name="1_exibir" class="exibir" placeholder="Reexibição do 2º input" />
    </div>    	
  </div>
</form>
<p>
  <a class="novo">Novo Bloco</a>
</p>

<div class="relatorio">

</div>
<script id="tmplBloco" type="text/template">
  <div class="sub_bloco">
    <input type="text" class="capturar" 
           name="{{indice}}_capturar" 
           placeholder="{{position}}º input"/>
    <input type="text" class="exibir" 
           name="{{indice}}_exibir" 
           placeholder="Reexibição do {{position}}º input" />
  </div>
</script>

note that I used bloco.on("keyup", ".capturar", function) instead of $(".capturar", function). This will make all elements with the class .capturar added to the bloco have the "keyup" event bind held

a second option is to make the bind manually, has a slightly better performance but I find less readable.

var bloco = $(".bloco");
var relatorio = $(".relatorio");
var capturar = $(".capturar");
var novo = $(".novo");
var source = $("#tmplBloco").html();

var tmplBloco = Handlebars.compile(source);
var tmplCaptute = Handlebars.compile("Você digitou <b>{{valor}}</b> no bloco :: <b>{{name}}</b><br>");
var tmplRelatorio = Handlebars.compile("Você acrescentou um novo bloco. Numeração :: <b>{{position}}</b><br>");

var onCaptureKeyUp = function(){
  var self = $(this);
  var exibir = self.siblings(".exibir").first();

  var model = { valor: self.val(), name: self.attr('name') };
  var novo_relatorio = $.parseHTML(tmplCaptute(model));  
  relatorio.append(novo_relatorio);

  exibir.val(model.valor);
}

novo.click(function(){
  var model = {};
  model.indice = $(".sub_bloco", bloco).length;
  model.position = model.indice + 1;

  var novo_bloco = $.parseHTML(tmplBloco(model));  
  $(".capturar", novo_bloco).keyup(onCaptureKeyUp);
  bloco.append(novo_bloco);

  var novo_relatorio = $.parseHTML(tmplRelatorio(model));  
  relatorio.append(novo_relatorio);
})

capturar.keyup(onCaptureKeyUp);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<h4>
  Ao digitar no 1º e 2º input, ele reexibi o texto digitado no input ao lado. Porém após acrescentar o 3º input esse efeito já não entra mais em atividade. Parece que a div e seu conteudo não é reconhecida
</h4>

<form action="" method="post">
  <div class="bloco">
    <div class="sub_bloco">
      <input type="text" name="0_capturar" class="capturar" placeholder="1º input"/>
      <input type="text" name="0_exibir" class="exibir" placeholder="Reexibição do 1º input" />
    </div> 
    <div class="sub_bloco">
      <input type="text" name="1_capturar" class="capturar" placeholder="2º input"/>
      <input type="text" name="1_exibir" class="exibir" placeholder="Reexibição do 2º input" />
    </div>    	
  </div>
</form>
<p>
  <a class="novo">Novo Bloco</a>
</p>

<div class="relatorio">

</div>
<script id="tmplBloco" type="text/template">
  <div class="sub_bloco">
    <input type="text" class="capturar" 
           name="{{indice}}_capturar" 
           placeholder="{{position}}º input"/>
    <input type="text" class="exibir" 
           name="{{indice}}_exibir" 
           placeholder="Reexibição do {{position}}º input" />
  </div>
</script>

now some tips:

1 - avoid making selectors in jQuery unnecessarily, as well as creating functions, preferably make them in the whole of your code and just reuse them in the rest of the script.

2 - avoid mounting HTML inline in the script, use a Template Engine for this, in the example above I used Handlebars.