Jump to content
fernandotholl

[Resolvido] Utilizar plugin jQuery em elemento criado após o DOM

Recommended Posts

Boa tarde pessoal!

Inicialmente postei na home do Fórum, mais como vi que a dúvida passou de um simples questionamento para algo mais complexo, resolvi postar aqui, mais vamos a ela:

 

Eu tenho um formulário onde eu posto documentos, com o seguintes campos:

protocolo-1.jpg

 

O Primeiro campo (data) possui um plugin do jQuery UI, que se chama datepicker.

 

protocolo-2.jpg

 

Na segunda imagem, mostra o segundo plugin que eu utilizo nesse formulário, que é o tokenInput (Auto-complete)

 

Até ai tudo bem, o problema é que eu posso adicionar mais de uma linha a cada vez, por isso existe o botão (+) Adicionar, e o botão copia exatamente a ultima <tr> da tabela e adiciona um novo id a ele.

 

protocolo-3.jpg

 

Vejam na imagem, os campos de data e auto-complete não funcionam, apenas o primeiro, isso porque esses elementos foram criados depois do DOM, via JavaScript.

 

Minha pergunta, como fazer esses dois plugins (datepicker e tokenInput) em elementos que foram criados depois do DOM?

 

Meus códigos:

 

$(".emitente").tokenInput("ajax/getProtocoloEmitente.php", {
hintText: "Nome ou CNPJ..",
noResultsText: "Nenhum resultado",
searchingText: "Carregando...",
deleteText: "x",
preventDuplicates: false,
enableCache: false,
tokenLimit: 1
});	 

/* Auto-complete destinatário */	
$(".destinatario").tokenInput("ajax/getProtocoloDestinatario.php", {
hintText: "Nome ou CNPJ..",
noResultsText: "Nenhuma resultado",
searchingText: "Carregando...",
deleteText: "x",
preventDuplicates: false,
enableCache: false,
tokenLimit: 1
});	

$(".campoData").datepicker({
dateFormat: 'dd/mm/yy',
   dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
   dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
   dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
   monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
   monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
   nextText: 'Próximo',
   prevText: 'Anterior'
});	

$('.botao-adicionar').click(function(event){

event.preventDefault();

var quantidade = intval($('.documento:last').attr('item'));
var novoID = quantidade + 1;
var html = '<tr item="'+novoID+'" class="documento">'	
+ '<td align="center" valign="middle">		'				
	+ '<input type="hidden" name="tabela" value="" item="'+novoID+'" /> '+novoID
+ '</td>'	
+ '<td align="center" valign="middle">'
	+ '<select name="tipo_documento_'+novoID+'" item="'+novoID+'" class="campoDocumento">'
		+ '<option value="0">Selecione...</option>'						
		+ '<option value="1">Alvará de Funcionamento Municipal</option>'
		+ '<option value="2">Alvará Sanitário Municipal</option>'
		+ '<option value="3">Autorização ANVISA</option>'
		+ '<option value="4">Certificado de Boas Práticas</option>'
		+ '<option value="5">Certificado de Responsabilidade Técnica</option>'
		+ '<option value="6">Carta de Autorização</option>'
		+ '<option value="7">Alteração Contratual</option>'
		+ '<option value="8">Cartão CNPJ</option>'
		+ '<option value="9">Certidão FGTS</option>'
		+ '<option value="10">Certidão Negativa Estadual</option>'
		+ '<option value="11">Certidão Negativa Federal</option>'
		+ '<option value="12">Certidão Negativa Municipal</option>'
		+ '<option value="13">Comprovante de endereço</option>'
		+ '<option value="14">Contrato Social</option>'
		+ '<option value="15">Cópia do Diário Oficial da União</option>'
		+ '<option value="16">Dados Cadastrais</option>'
		+ '<option value="17">Inscrição Estadual</option>'
		+ '<option value="18">Inscrição Federal</option>'
		+ '<option value="19">Inscrição Municipal</option>'
		+ '<option value="20">Tabela de Materiais</option>'
	+ '</select>'
+ '</td>'
+ '<td align="center" valign="middle"><input type="text" item="'+novoID+'" name="numero_documento_'+novoID+'" class="campo-cadastro" /></td>'
+ '<td align="center" valign="middle"><input type="text" item="'+novoID+'" name="data_emissao_'+novoID+'" class="campo-cadastro campoData" /></td>'
+ '<td align="center" valign="middle"><input type="text" item="'+novoID+'" name="data_vencimento_'+novoID+'" class="campo-cadastro campoData" /></td>'					
+ '<td align="center" valign="middle"><input type="text" item="'+novoID+'" name="emitente_'+novoID+'" class="emitente campo-cadastro" /></td>'				
+ '<td align="center" valign="middle"><input type="text" item="'+novoID+'" name="destinatario_'+novoID+'" class="destinatario campo-cadastro" /></td>'					
+ '<td align="center" valign="middle">'
	+ '<select name="situacao_'+novoID+'" class="estilo-select" item="'+novoID+'">'
		+ '<option value="1">Ativo</option>'
		+ '<option value="2">Inativo</option>'
	+ '</select>'
+ '</td>'						
+ '<td align="center" valign="middle">'
	+ '<select name="justificativa_'+novoID+'" class="estilo-select" item="'+novoID+'">'
		+ '<option value="1">Cancelado</option>'
		+ '<option value="2">Duplicidade</option>'
	+ '</select>'
+ '</td>'						
+ '</tr>';		

$('.documento:last').after(html);

 

HTML

 

<table class="tabela_fixed add-cores" style="margin-top:10px;" class="documentos">
<thead>
	<tr>
		<td>#</td>
		<td>Tipo de documento</td>
		<td>Número do documento</td>
		<td>Data emissão</td>
		<td>Data vencimento</td>	
		<td>Emitente</td>
		<td>Destinatário</td>
		<td>Situação</td>
		<td>Justificativa</td>
	</tr>
</thead>											
<tr item="1" class="documento">	
	<td align="center" valign="middle">
		1
	</td>		
	<td align="center" valign="middle">
		<select name="tipo_documento_1" item="1" class="campoDocumento">
			<option value="0">Selecione...</option>				
		</select>
	</td>
	<td align="center" valign="middle"><input type="text" item="1" name="numero_documento_1" class="campo-cadastro" /></td>
	<td align="center" valign="middle"><input type="text" item="1" name="data_emissao_1" class="campo-cadastro campoData" /></td>
	<td align="center" valign="middle"><input type="text" item="1" name="data_vencimento_1" class="campo-cadastro campoData" /></td>						
	<td align="center" valign="middle"><input type="text" item="1" name="emitente_1" class="emitente campo-cadastro" /></td>						
	<td align="center" valign="middle"><input type="text" item="1" name="destinatario_1" class="destinatario campo-cadastro" /></td>						
	<td align="center" valign="middle">
		<select name="situacao_1" class="estilo-select" item="1">
			<option value="1">Ativo</option>
			<option value="2">Inativo</option>
		</select>
	</td>						
	<td align="center" valign="middle">
		<select name="justificativa_1" class="estilo-select" item="1">
			<option value="1">Cancelado</option>
			<option value="2">Duplicidade</option>
		</select>
	</td>						
</tr>			

</tbody>
</table>

<button class="botao-adicionar">(+) Adicionar</button>
<button class="botao-salvar">Salvar Documentos</button>
<div class="clear"></div> 

 

Já tentei com o live, delegate, on ajaxStop, porém não se se estava correto, ou se essas funções realmente não funcionam nesses casos.

 

Fico aguardando a ajuda de vocês, obrigado.

Edited by fernandotholl

Share this post


Link to post
Share on other sites

Falta o código de adicionar a nova linha.

Share this post


Link to post
Share on other sites

tente encapsular seus códigos em javascript em uma função, e chame-a quando necessário, como por exemplo:

function minhaFuncao() {
   $(".emitente").tokenInput("ajax/getProtocoloEmitente.php", {
           hintText: "Nome ou CNPJ..",
           noResultsText: "Nenhum resultado",
           searchingText: "Carregando...",
           deleteText: "x",
           preventDuplicates: false,
           enableCache: false,
           tokenLimit: 1
   });      

   /* Auto-complete destinatário */        
   $(".destinatario").tokenInput("ajax/getProtocoloDestinatario.php", {
           hintText: "Nome ou CNPJ..",
           noResultsText: "Nenhuma resultado",
           searchingText: "Carregando...",
           deleteText: "x",
           preventDuplicates: false,
           enableCache: false,
           tokenLimit: 1
   });     

   $(".campoData").datepicker({
           dateFormat: 'dd/mm/yy',
       dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
       dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
       dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
       monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
       monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
       nextText: 'Próximo',
       prevText: 'Anterior'
   });  
}

 

Depois, somente chame-o no final da execução de adicionar o botão:

$('.botao-adicionar').click(function(event){
   /**
   códigos e mais códigos
   **/

   //chamada da função
   minhaFuncao();
}

 

Acredito que isso resolva seu problema. AjaxStop também deveria resolver, mas estou sem tempo para testar.

Edited by Gabriel Heming
  • +1 1

Share this post


Link to post
Share on other sites

ok, olhe aqui:

 

$('.documento:last').after(html);

ai você insere no html, certo ?

 

logo depois disso você deve instanciar o plugin

  • +1 1

Share this post


Link to post
Share on other sites

Obrigado Bruno, deu certo.

 

Mais uma vez o problema não estava no Script, e sim na forma de utiliza-lo. Você conseguiu compreender bem a minha dúvida, e respondeu com clareza.

 

Obrigado.

 

@Gabriel Heming, suas dicas foram úteis, obrigado.

Share this post


Link to post
Share on other sites

Olá sou novo no fórum, talvez esteja postando errado mas enfim tenho um problema parecido com este e não consegui entender a solução será que você poderia dar um auxilio, abaixo segue meu código:

 

 

//Este é o botão que aciona a minha função para adicionar uma tabela com inputs dinamicamente

$(document.body).on("click", "#btn_add_item", function() {

add_row_item($("#nbr_num_row").val());

});

 

 

 

 

//Esta é a função que implementa a tabela dinamicamente o problema aqui é que quando adicionado através do botão os campos com maskMoney não funcionam

function add_row_item(num_row_item) {
var controle_row_item = 1;//indice
while (controle_row_item <= num_row_item){
row = "<tr>"
               + "<td> <select class='input-small'><option>EMP</option><option value='estoque' style='color: blue;'>Colocar em estoque</option></select></td>"
               + "<td><input type='number' value='1' min='1' class='input-mini'></td>"
               + "<td><select class='input-mini'><option>CC</option></select></td></td>"
               + "<td><select class='input-small'><option>SCC</option></select></td></td>"
               + "<td><input type='text' class='input-large'></td>"
               + "<td><select class='input-mini'><option>UN</option></select></td></td>"
               + "<td><input type='number' value='1' min='1' class='input-mini'></td>"
               + "<td><input type='text' class='input-mini' id='txt_valor_unitario'></td>"
               + "<td><div class='input-append'><input type='text' class='input-mini' id='txt_desconto'><div class='btn-group'><a data-toggle='dropdown' class='btn dropdown-toggle'> <span id='spn_tipo_desconto'>R$</span> <span class='caret'></span> </a><ul class='dropdown-menu'><li><a>Em percentual %</a></li><li><a>Em valor absoluto R$</a></li></ul></div></div></td>"
               +"<td><input type='text' class='input-mini' disabled id='txt_valor_subtotal'></td>"
               + "</tr>";
$("#tbl_notas > tbody:last").append(row);
$("#txt_valor_unitario").maskMoney({showSymbol:true, symbol:"R$", decimal:",", thousands:"."});  // não funciona ao adicionar pelo meu botão
$("#txt_desconto").maskMoney({showSymbol:true, symbol:"R$", decimal:",", thousands:"."}); // não funciona ao adicionar pelo meu botão
 
controle_row_item++; 
}
}

obrigado,

Edited by William Bruno
Remover quote

Share this post


Link to post
Share on other sites

Está correto. A única coisa que falta é vc parar de duplicar id.

ID é um identificador único. Então quando vc inserir uma nova linha, vc não pode ter ID nos elementos.

  • +1 1

Share this post


Link to post
Share on other sites

 

Agora pegou show de bola, porém ocorre outro problema estou pegando pela classe, só que ao digitar um número ele repete o mesmo exemplo digito 9 e ele coloca 99

fiz assim:

function add_row_item(num_row_item) {
var controle_row_item = 1;//indice
while (controle_row_item <= num_row_item){
row = "<tr>"
               + "<td> <select class='input-small'><option>EMP</option><option value='estoque' style='color: blue;'>Colocar em estoque</option></select></td>"
               + "<td><input type='number' value='1' min='1' class='input-mini'></td>"
               + "<td><select class='input-mini'><option>CC</option></select></td></td>"
               + "<td><select class='input-small'><option>SCC</option></select></td></td>"
               + "<td><input type='text' class='input-large'></td>"
               + "<td><select class='input-mini'><option>UN</option></select></td></td>"
               + "<td><input type='number' value='1' min='1' class='input-mini'></td>"
               + "<td><input type='text' class='input-mini money'></td>"
               + "<td><div class='input-append'><input type='text' class='input-mini money'><div class='btn-group'><a data-toggle='dropdown' class='btn dropdown-toggle'> <span id='spn_tipo_desconto'>R$</span> <span class='caret'></span> </a><ul class='dropdown-menu'><li><a>Em percentual %</a></li><li><a>Em valor absoluto R$</a></li></ul></div></div></td>"
               +"<td><input type='text' class='input-mini' disabled></td>"
               + "</tr>";
$("#tbl_notas > tbody:last").append(row);
$(".money").maskMoney({showSymbol:true, symbol:"R$", decimal:",", thousands:"."});  //pegando pela classe
$(".money").maskMoney({showSymbol:true, symbol:"R$", decimal:",", thousands:"."});  //pegando pela classe
controle_row_item++; 
}
}
Edited by William Bruno
Adicionar code

Share this post


Link to post
Share on other sites

Okay.. agora falta um detalhezinho: em vez de vc aplicar para todos os elementos, até os que já estavam na página, vc precisa aplicar apenas para o cara que acabou de ser inserido.

 

troca:

$(".money").maskMoney
por

$("#tbl_notas > tbody:last > tr:last").find(".money").maskMoney
entendeu ?
  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.