Jquery does not work after using the function .remove ();

0

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;
  }
}
    
asked by anonymous 04.02.2016 / 14:50

1 answer

0

Thiago, your problem is basically a side effect of bad practice ... use selectors as a variable.

For example, look at the following excerpt:

$('#cidadeID2').change(function() {
  //alert('#cidadeID2');
  var optionID2 = $('#cidadeID2 option:selected').attr('class');
  if(optionID2 == 'educador'){
    $('#resp2').html(tabela2());
  }else{
    $('#resp2').html('');
  }
  //alert('fim #cidadeID2');
});

It performs the search for input#cidadeID2 and atrui a change event to it. Since whenever there is a modification in input#cidadeID2 , it will search for div#resp2 and update its content.

But what happens when with input#cidadeID2 , when I exclude tab1 that contains input#cidadeID1 ? input#cidadeID2 and div#resp2 are renamed to input#cidadeID1 and div#resp1 , but the previous event remains associated with input#cidadeID1 , which will search for div#resp2 ... clutter né?

The solution here is to create a scope for your tab, I particularly like to use a Object and prototype , and a template for the tab.

Template (not HTML)

<template id="tmplLinha">
  <div class="tab-pane fade" id="tab{{indice}}">
    <div class="col-xs-6">
      <h5 class="text-left modificah5" style="display:none">{{indice}}</h5>
      <div class="form-group text-right alinhacampos4">
        <label for="nome" class="text-right modificalabel1">Nome do Educador ou Gestor <span class="corobrigatorio">*</span></label>
        <input type="text" class="form-control modificainput1" name="nome_educador[{{indice}}]">
      </div>
      <div class="form-group text-right alinhacampos4">
        <label for="cpf" class="text-right modificalabel1">CPF <span class="corobrigatorio">*</span></label>
        <input type="text" class="form-control modificainput1 cpf" name="cpf[{{indice}}]" id="cpf" class="required cpf" maxlength="14" autocomplete="off">
      </div>
      <div class="form-group text-right alinhacampos4">
        <label for="email" class="text-right modificalabel1">E-mail <span class="corobrigatorio">*</span></label>
        <input type="email" class="form-control modificainput1" name="email_educador[{{indice}}]" id="email_educador">
      </div>
      <div class="form-group text-right alinhacampos4">
        <label for="cidade" class="text-right campos1">Cargo <span class="corobrigatorio">*</span></label>
        <select class="form-control campos2R required"  name="cidade[{{indice}}]" id="cidadeID{{indice}}">
          <option>Selecione</option>
          <option class="diretor" value="diretor">Diretor</option>
          <option class="coordenador" value="coordenador">Coordenador</option>
          <option class="educador" value="educador">Educador</option>
          <option class="equipe-tecnica" value="equipe-tecnica">Equipe Técnica</option>
          <option class="educador-socioemocional" value="educador-socioemocional">Educador socioemocional</option>
        </select>
      </div>                                         
    </div>
    <div class="col-xs-6" id="resp{{indice}}">
    </div>
  </div>
</template>
<template id="tmplTitulo">
  <li id="li{{indice}}">
    <a href="#tab{{indice}}" role="tab" data-toggle="tab"  class="atualizaraba{{indice}}">
      <span class="tit{{indice}}">{{indice}}</span> 
      <span class="escondedel{{indice}}" onclick="removeTab({{indice}});" style="float: right;">
        <img src="img/nova/fechar.png" alt="Fechar" title="Fechar">
      </span>
    </a>
  </li>
</template>

Script Tab

var quantidade = 1;
var tabs = [];
var Tab = function () {
  var self = this;
  this.indice = quantidade;
  this.titulo = {};
  this.conteudo = {};
  this.titulo.container = $("#li" + indice); 
  this.conteudo.container = $("#tab" + indice);     

  // caso não encontre uma tab com o indice especificado
  if (!this.titulo.container || this.titulo.container.length == 0) {        
    var anterior = this.indice - 1;
    this.titulo.anterior = $("#li" + anterior);
    this.conteudo.anterior = $("#tab" + anterior);

    this.titulo.container = $(this.tmplTitulo.replace("{{indice}}", indice));
    this.conteudo.container = $(this.tmplLinha.replace("{{indice}}", indice));

    this.titulo.anterior.after(this.titulo.container);
    this.conteudo.anterior.after(this.conteudo.container);
  }

  this.titulo.atualizaraba = $(".atualizaraba" + this.indice, this.titulo.container);
  this.titulo.tit = $(".tit" + this.indice, this.titulo.container);
  this.titulo.escondedel = $(".escondedel" + this.indice, this.titulo.container);

  this.conteudo.modificah5 = $(".modificah5", this.conteudo.container);
  this.conteudo.nome_educador = $("input[name='nome_educador[" + this.indice + "]']", this.conteudo.container);
  this.conteudo.cpf = $("input[name='cpf[" + this.indice + "]']", this.conteudo.container);
  this.conteudo.email_educador = $("input[name='email_educador[" + this.indice + "]']", this.conteudo.container);
  this.conteudo.cidade = $("input[name='cidade[" + this.indice + "]']", this.conteudo.container);
  this.conteudo.resp = $("resp" + this.indice, this.conteudo.container);

  this.titulo.escondedel.click(function () {
    self.onEscondedelClick();
  });

  this.conteudo.cpf.mask("999999999-99");
  this.conteudo.resp.html('');                                   
  this.conteudo.cidade.change(function() {   
    self.onCidadeClick();
  });
  quantidade++;
}

Tab.prototype.quantidade = 1;
Tab.prototype.tmplLinha = document.getElementById("tmplLinha").innerHTML;
Tab.prototype.tmplTitulo = document.getElementById("tmplTitulo").innerHTML;
Tab.prototype.atualizarIndice = function (indice) {
  this.indice = indice;
  this.titulo.container.attr("id", "li" + this.indice);
  this.titulo.tab.attr("href", "#tab" + this.indice);
  this.titulo.tab.attr("class", "atualizaraba" + this.indice);
  this.titulo.tit.attr("class", "tit" + this.indice);
  this.titulo.tit.text(this.indice);
  this.titulo.escondedel.attr("class", "escondedel" + this.indice);
  this.titulo.escondedel.attr("class", "escondedel" + this.indice);

  this.titulo.container.attr("id", "tab" + this.indice);
  this.conteudo.modificah5.attr("class", "modificah5" + this.indice);
  this.conteudo.nome_educador.attr("name", "nome_educador[" + this.indice + "]");
  this.conteudo.cpf.attr("name", "cpf[" + this.indice + "]");
  this.conteudo.email_educador.attr("name", "email_educador[" + this.indice + "]");
  this.conteudo.cidade.attr("name", "cidade[" + this.indice + "]");
  this.conteudo.cidade.attr("id", "cidadeID" + this.indice);
  this.conteudo.resp.attr("id", "resp" + this.indice);
}

Tab.prototype.onEscondedelClick = function () {
  if (confirm("Tem certeza que deseja excluir esta aba?")) {
    tabs.splice(this.indice - 1, 1);
    this.titulo.container.remove();
    this.conteudo.container.remove();
    for (var index = this.indice - 1; this.indice < tabs.length; index++) {
      tabs[index].atualizarIndice(tabs[index].indice - 1);
    }
    quantidade--;
  }
}

Tab.prototype.onCidadeClick = function () {
  var optionID = this.conteudo.cidade.attr('class');
  if(optionID == 'educador'){
    this.conteudo.resp.html(tabela2());
  }else{
    this.conteudo.resp.html('');
  }
}

var addTab = $('#myTab a[href="#addTab"]');
addTab.on('click', function () { 
  tabs.push(new Tab());
});
addTab.trigger("click"); //criar o objeto Tab para a tab1;

Update

The above code uses only javascript and we have a clear grouping of the elements of the tab, however as you are not used to JavaScript, then try replacing the following block of code:

$('#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');
});  

by the following:

var cidade = $('#cidadeID' + nbrLiElem);
var resp = $('#resp' + nbrLiElem);

cidade.change(function() {
  //alert('#cidadeID10');
  var optionID = cidade.find('option:selected').attr('class');
  if(optionID == 'educador'){
    resp.html(tabela2());
  }else{
    resp.html('');
  }
}); 

Note that I am performing the search for select#cidadeIDN and div#respN only once, then I only use it.

In any case, I'll accompany you to read the following materials:

  • 04.02.2016 / 18:25