Bom dia,
Estou fazendo um formulário com abas onde o usuário pode adicionar e excluir as abas quando precisar, para o usuário deletar a aba uso a função .remove() do jquery e a próxima aba fica no lugar da deletada, o meu problema é que no formulário tenho um select que quando seleciono ele chama uma função que carrega umas informações só que quando deleto alguma aba o select não funciona e quando peço para debugar mostra a mensagem 'undefined', alguém pode me ajudar e encontrar o erro por favor? obrigado.
$(function () {
$(".cpf").mask("999999999-99");
$(".tel").mask("(99) 9999-9999");
$('#resp1').html('');
$('#cidadeID1').change(function() {
//alert('#cidadeID1');
var optionID = $('#cidadeID1 option:selected').attr('class');
if(optionID == 'educador'){
$('#resp1').html(tabela2());
}else{
$('#resp1').html('');
}
//alert('fim #cidadeID1');
});
return false;
});
$(function () {
$('#displayElem').html('1');
$('#myTab a[href="#addTab"]').on('click', function () {
var nbrLiElem = ($('ul#myTab li').length) - 1;
if(nbrLiElem == 9){
$("#last").hide();
}
var contador = nbrLiElem + 1;
if(nbrLiElem > 9){
var nbrLiElem = 1;
return;
}
var ulttab = '#tab' + nbrLiElem;
var ultli = '#li' + nbrLiElem;
$('ul#myTab li:last-child').before('<li id="li' + (nbrLiElem + 1) + '"><a href="#tab' + (nbrLiElem + 1) + '" role="tab" data-toggle="tab" class="atualizaraba' + (nbrLiElem + 1) + '"><span class="tit' + (nbrLiElem + 1) + '">' + (nbrLiElem + 1) + '</span> <span class="escondedel' + (nbrLiElem + 1) + '" onclick="removeTab(' + (nbrLiElem + 1) + ');" style="float: right;"><img src="img/nova/fechar.png" alt="Fechar" title="Fechar"></span></a>');
var txt1 = '<div class="col-xs-6">';
var txt2 = '<h5 class="text-left modificah5" style="display:none">'+ (nbrLiElem + 1) +'</h5>';
var txt3 = '<div class="form-group text-right alinhacampos4">';
var txt4 = '<label for="nome" class="text-right modificalabel1">Nome do Educador ou Gestor <span class="corobrigatorio">*</span></label>';
var txt5 = '<input type="text" class="form-control modificainput1" name="nome_educador['+ (nbrLiElem + 1) +']">';
var txt6 = '</div>';
var txt7 = '<div class="form-group text-right alinhacampos4">';
var txt8 = '<label for="cpf" class="text-right modificalabel1">CPF <span class="corobrigatorio">*</span></label>';
var txt9 = '<input type="text" class="form-control modificainput1 cpf" name="cpf['+ (nbrLiElem + 1) +']" id="cpf" class="required cpf" maxlength="14" autocomplete="off">';
var txt10 = '</div>';
var txt11 = '<div class="form-group text-right alinhacampos4">';
var txt12 = '<label for="email" class="text-right modificalabel1">E-mail <span class="corobrigatorio">*</span></label>';
var txt13 = '<input type="email" class="form-control modificainput1" name="email_educador['+ (nbrLiElem + 1) +']" id="email_educador">';
var txt14 = '</div>';
var txt15 = '<div class="form-group text-right alinhacampos4">';
var txt16 = '<label for="cidade" class="text-right campos1">Cargo <span class="corobrigatorio">*</span></label>';
var txt17 = '<select class="form-control campos2R required" name="cidade['+ (nbrLiElem + 1) +']" id="cidadeID'+ (nbrLiElem + 1) +'">';
var txt18 = '<option>Selecione</option>';
var txt19 = '<option class="diretor" value="diretor">Diretor</option>';
var txt20 = '<option class="coordenador" value="coordenador">Coordenador</option>';
var txt21 = '<option class="educador" value="educador">Educador</option>';
var txt22 = '<option class="equipe-tecnica" value="equipe-tecnica">Equipe Técnica</option>';
var txt23 = '<option class="educador-socioemocional" value="educador-socioemocional">Educador socioemocional</option>';
var txt24 = '</select>';
var txt25 = '</div>';
var txt26 = '</div>';
var txt27 = '<div class="col-xs-6" id="resp'+ (nbrLiElem + 1) +'">';
var txt28 = '</div>';
var somatxt = txt1 + txt2 + txt3 + txt4 + txt5 + txt6 + txt7 + txt8 + txt9 + txt10 + txt11 + txt12 + txt13 + txt14 + txt15 + txt16 + txt17 + txt18 + txt19 + txt20 + txt21 + txt22 + txt23 + txt24 + txt25 + txt26 + txt27 + txt28;
$(ulttab).after('<div class="tab-pane fade" id="tab' + (nbrLiElem + 1) + '">' + somatxt + '');
nbrLiElem = nbrLiElem + 1;
$('#displayElem').html(nbrLiElem);
$('#cidadeID2').change(function() {
//alert('#cidadeID2');
var optionID2 = $('#cidadeID2 option:selected').attr('class');
if(optionID2 == 'educador'){
$('#resp2').html(tabela2());
}else{
$('#resp2').html('');
}
//alert('fim #cidadeID2');
});
$('#cidadeID3').change(function() {
//alert('#cidadeID3');
var optionID3 = $('#cidadeID3 option:selected').attr('class');
if(optionID3 == 'educador'){
$('#resp3').html(tabela2());
}else{
$('#resp3').html('');
}
//alert('fim #cidadeID3');
});
$('#cidadeID4').change(function() {
//alert('#cidadeID4');
var optionID4 = $('#cidadeID4 option:selected').attr('class');
if(optionID4 == 'educador'){
$('#resp4').html(tabela2());
}else{
$('#resp4').html('');
}
//alert('fim #cidadeID4');
});
$('#cidadeID5').change(function() {
//alert('#cidadeID5');
var optionID5 = $('#cidadeID5 option:selected').attr('class');
if(optionID5 == 'educador'){
$('#resp5').html(tabela2());
}else{
$('#resp5').html('');
}
//alert('fim #cidadeID5');
});
$('#cidadeID6').change(function() {
//alert('#cidadeID6');
var optionID6 = $('#cidadeID6 option:selected').attr('class');
if(optionID6 == 'educador'){
$('#resp6').html(tabela2());
}else{
$('#resp6').html('');
}
//alert('fim #cidadeID6');
});
$('#cidadeID7').change(function() {
//alert('#cidadeID7');
var optionID7 = $('#cidadeID7 option:selected').attr('class');
if(optionID7 == 'educador'){
$('#resp7').html(tabela2());
}else{
$('#resp7').html('');
}
//alert('fim #cidadeID7');
});
$('#cidadeID8').change(function() {
//alert('#cidadeID8');
var optionID8 = $('#cidadeID8 option:selected').attr('class');
if(optionID8 == 'educador'){
$('#resp8').html(tabela2());
}else{
$('#resp8').html('');
}
//alert('fim #cidadeID8');
});
$('#cidadeID9').change(function() {
//alert('#cidadeID9');
var optionID9 = $('#cidadeID9 option:selected').attr('class');
if(optionID9 == 'educador'){
$('#resp9').html(tabela2());
}else{
$('#resp9').html('');
}
//alert('fim #cidadeID9');
});
$('#cidadeID10').change(function() {
//alert('#cidadeID10');
var optionID10 = $('#cidadeID10 option:selected').attr('class');
if(optionID10 == 'educador'){
$('#resp10').html(tabela2());
}else{
$('#resp10').html('');
}
//alert('fim #cidadeID10');
});
$(".cpf").mask("999999999-99");
$("#li"+(nbrLiElem-1)).attr( "class", "" );
$("#tab"+(nbrLiElem-1)).attr( "class", "tab-pane fade" );
$("#li"+nbrLiElem).attr( "class", "active" );
$("#tab"+nbrLiElem).attr( "class", "tab-pane fade in active" );
return false;
});
});
function removeTab(liElem) {
if (confirm("Tem certeza que deseja excluir esta aba?")) {
$('ul#myTab > li#li' + liElem).fadeOut(1000, function () {
$(this).remove();
$('#messagesAlert').text('');
});
$('div.tab-content div#tab' + liElem).remove();
$('ul#myTab > li').not('#last').not('#li' + liElem).each(function(i){
var getAttr = $(this).attr('id').split('li');
$('ul#myTab li#li' + getAttr[1]).attr('id', 'li' + (i + 1));
$('#myTab span[class="tit' + getAttr[1] + '"]').html((i + 1));
$('#myTab span[class="tit' + getAttr[1] + '"]').attr('class', 'tit' + (i + 1));
$('#myTab a[href="#tab' + getAttr[1] + '"]').attr('href', '#tab' + (i + 1));
$('#myTab a[class="atualizaraba' + getAttr[1] + '"]').attr('class', 'atualizaraba' + (i + 1));
$('#myTab span[class="escondedel' + getAttr[1] + '"]').attr('class', 'escondedel' + (i + 1));
$('#myTab span[onclick="removeTab(' + getAttr[1] + ');"]').attr('onclick', 'removeTab(' + (i + 1) +');');
$('div.tab-content div#tab' + getAttr[1]).attr('id', 'tab' + (i + 1));
$('div.tab-content input[name="nome_educador[' + getAttr[1] + ']"]').attr('name', 'nome_educador[' + (i + 1) +']');
$('div.tab-content input[name="cpf[' + getAttr[1] + ']"]').attr('name', 'cpf[' + (i + 1) +']');
$('div.tab-content input[name="email_educador[' + getAttr[1] + ']"]').attr('name', 'email_educador[' + (i + 1) +']');
$('#cidadeID' + getAttr[1] + '').attr('name', 'cidade[' + (i + 1) +']');
$('#cidadeID' + getAttr[1] + '').attr('id', 'cidadeID[' + (i + 1) +']');
$('div.tab-content div[id="resp' + getAttr[1] + '"]').attr('id', 'resp' + (i + 1));
$('#displayElem').html(i+1);
$('.escondedel' + (liElem-1) + '').show();
if(i < 9){
$("#last").show();
}
$("#li1").attr( "class", "active" );
$("#tab1").attr( "class", "tab-pane fade in active" );
});
return false;
}
}
$('#cidadeIDN').change(function { ... }
10 vezes.