Good morning,
I'm making a form with tabs where the user can add and delete the tabs when needed, for the user to delete the tab use the .remove () function of jquery and the next tab is in place of deleted, my problem is that in the form I have a select that when I select it calls a function that loads an information only when I delete some tab the select does not work and when I ask to debug it shows the message 'undefined', can someone help me and find the error please? Thank you.
$(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;
}
}