Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

alemaopn

Maskedinput em campos dinamicos

Por , em Javascript

Recommended Posts

alemaopn    0

alemaopn
Postado

De Boas galera?

Tenho um campo que é para inserir o telefone nesse campo a mascara funciona de boa, até ai tudo bem. Quando clico no botão de inserir mais um campo a mascara não funciona no novo campo que foi inserida.

 

Mascara

 jQuery(function ($) {
        $("#data").mask("99/99/9999");
        $("#cep").mask("99999-999");
        $("#tel").mask("(99)9999-9999");

    });

Adicionar input dinamico

var campos_max = 5;   //max de 10 campos
    var x = 1; // campos iniciais
    $('#add_field').click(function (e) {
        e.preventDefault();     //prevenir novos clicks
        if (x < campos_max) {
            $('#telefone').append('<div class="form-group col-md-13"  id="telefone"><br>\
      <input type="text" name="telefone[]" class="form-control">\
     <a href="#" class="remover_campo">Remover</a>\
     </div>');
            x++;
        }
    });

    // Remover o div anterior
    $('#telefone').on("click", ".remover_campo", function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });

O html

<div class="form-group col-md-4" id="telefone">
                        <label for="campo3">Telefone</label>
                        <input type="text" required="" name="telefone[]" id="tel" class="form-control">
                    </div>
                    
                    <div class="form-group col-md-2">
                        <label for="campo3">Cadastrar Outro Número</label>
                        <input type="button"  id="add_field"  class="form-control btn btn-primary" value="Adicionar">
                    </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Bom tem varias coisas erradas ai.

 

-> id (id="tel") deve ser único na pagina, se você vai aplicar a mascara para vários elementos no html é necessário utilizar o class.

 

Outra coisa é ao chamar o mask("(99)9999-9999") ele é ativo para aqueles elementos...

Ou Seja a cada interação é necessário chamar ele novamente.

 

Outra, o elemento que você inseriu não tinha nenhuma referencia ao 'mask':

<input type="text" name="telefone[]" class="form-control">\

O atributo class do html, pode conter varias classes dentro dele, seguindo essa ideia refiz seu código:

 

 

Segue um exemplo:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	
	<div class="form-group col-md-4" id="telefone">
		<label for="campo3">Telefone</label>
		<input type="text" required="" name="telefone[]" class="form-control tel">
	</div>
	
	<div class="form-group col-md-2">
		<label for="campo3">Cadastrar Outro Número</label>
		<input type="button"  id="add_field"  class="form-control btn btn-primary" value="Adicionar">
	</div>
					
					
	<script src="../js/lib/jquery-1.10.2.js"></script>
	<script src="../js/plugins/maskedinput/jquery.maskedinput.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".tel").mask("(99)9999-9999"); //Inicia
			
			var campos_max = 5;   //max de 10 campos
			var x = 1; // campos iniciais
			
			$( "#add_field" ).bind( "click", function() {
				if (x < campos_max) {
					$('#telefone').append(
					'<div class="form-group col-md-13"  id="telefone"><br>\
						<input type="text" name="telefone[]" class="tel" class="form-control" />\
						<a href="#" class="remover_campo">Remover</a>\
					</div>');
					x++;
				}
				$(".tel").mask("(99)9999-9999"); //Refaz todas as mask inclusive no elemento que acabou de entrar
			});
			
			$('#telefone').on("click", ".remover_campo", function (e) {
				e.preventDefault();
				$(this).parent('div').remove();
				x--;
			});
		});
	</script>
	
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito