To try to make a form a little more dynamic! However, when adding new inputs with append of javascript, it is not recognized. And the effect is not realized.
The effect in question is the redisplay of the text typed in the input A_1 in the input A_2.
The recognized inputs that accept this effect are only inputs that are entered directly into the code without append.
Here is the code working: link
ivan, when you bind an event to a jQuery object, it will only apply to the elements contained in the object at that time.
It's worth remembering that adding a new element will not update previously collected object collections unless you do it manually.
In this case you have two options, the first one is simpler, but it may have a performance slightly smaller than the second, in this case you will use .on() in the object that contains all the 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><scriptsrc="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 cause all elements with class .capturar to be added to bloco to bind to the "keyup" event performed
A second option is to bind manually, has a slightly better performance, but I find it less legible.
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><scriptsrc="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 do them throughout your code and just reuse them in the rest of the script.
2 - avoid putting inline HTML in the script, use for this a Template Engine, in the example above I used the Handlebars.