0

To tentando fazer um form um pouco mais dinâmico! Porém ao acrescentar novos inputs com o append do javascript, o mesmo não é reconhecido. E o efeito não é realizado.

O efeito em questão é a reexibição do texto digitado no input A_1 no input A_2.

Os inputs reconhecidos que aceitam esse efeito, são apenas os inputs que são inseridos diretamente no código, sem o append.

Aqui está o código funcionando :: http://jsfiddle.net/3egeefex/

1

1 Resposta 1

1

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .