ivan, quando você faz um bind de um evento a um objeto jQuery, ele vai aplicar apenas aos elementos contidos no objeto naquele momento.
Vale lembrar que adicionar um novo elemento não vai atualizar os coleções de objetos obtidas anteriormente, a menos que o faça manualmente.
neste caso você tem duas opções, a primeira é mais simples, mas pode terá o desempenho um pouco menor que a segunda, neste caso você usará o .on()
no objeto que contem todos os blocos.
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 que usei bloco.on("keyup", ".capturar", function)
ao inves de $(".capturar", function)
. Isto fará que todos os elementos com a classe .capturar
que sejam adicionados ao bloco
tenham o bind ao evento "keyup" realizado
uma segunda opção é fazer o bind de forma manual, tem um desempenho um pouco melhor, mas acho menos legível.
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>
agora umas dicas:
1 - evite ficar fazendo seletores no jQuery sem necessidade, assim como a criação de funções, de preferencia faça eles no todo do seu código e apenas reuse eles no resto do script.
2 - evite montar HTML inline no script, use para isto uma Template Engine, no exemplo acima usei o Handlebars.