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

fernandotholl · Janeiro 7, 2013

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:

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

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.

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.

Gabriel Heming · Janeiro 7, 2013

Falta o código de adicionar a nova linha.

fernandotholl · Janeiro 7, 2013

Falta o código de adicionar a nova linha.

Não falta mais :D

Gabriel Heming · Janeiro 7, 2013

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.

William Bruno · Janeiro 7, 2013

ok, olhe aqui:

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

ai você insere no html, certo ?

logo depois disso você deve instanciar o plugin

fernandotholl · Janeiro 8, 2013

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.

Cristiano Mesquita · Abril 16, 2015

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,

William Bruno · Abril 16, 2015

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.

Cristiano Mesquita · Abril 16, 2015

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++; 
}
}

William Bruno · Abril 16, 2015

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 ?

Cristiano Mesquita · Abril 16, 2015

Entendi perfeitamente e funcionou perfeitamente, não sei nem como agradecer, estava quebrando a cabeça à dias com isso, muito obrigado.

Arquivado

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

Recommended Posts

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cristiano Mesquita 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cristiano Mesquita 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cristiano Mesquita 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

agregar dados em VBA excel

Sistema não funciona corretamente

Fazer busca no Banco de dados usando vários critério

Fóruns

Tempo Real

Informação importante