Comparison being repeated gradually in different records

Question

In my code below I have a table that shows some data and a button to edit.

When I click the edit button once it works normally, open the modal with the input's completed and the Javascript identifies if something has been changed to enable the confirm edit button.

The problem is that if I repeat the process in other records the comparison command will multiply gradually, that is, in the first record makes the comparison once, in the second twice and so on.

I am not able to think of a way to solve this problem so that the comparison command is done only once in each record.

Could you help me?

Follows code:

$('body').on("click", ".edit", function(){
  $('#confEditar').attr('disabled', 'disabled');
  $('#nomeEditar').val($(this).parents('tr').find('td').eq(1).text());
  $('#emailEditar').val($(this).parents('tr').find('td').eq(2).text());
  $('#nomeEditar').focus(function(){
    nome = $(this).val();
    console.log(nome + ' = ' + $(this).val());
  });
  $('#nomeEditar').focusout(function(){
    if ($(this).val() != nome) {
      $('#confEditar').removeAttr('disabled');
      console.log('Diferente: ' + $(this).val() + ' e ' + nome);
    } else {
      console.log('Igual: ' + $(this).val() + ' e ' + nome);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
  <table class="table table-hover table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nome</th>
        <th>Email</th>
        <th>Ações</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>Carlos</td>
      <td>[email protected]</td>
      <td>
        <button type="button" class="btn btn-warning btn-sm edit" data-toggle="modal" data-target="#modalEditar"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Cesar</td>
      <td>[email protected]</td>
      <td>
        <button type="button" class="btn btn-warning btn-sm edit" data-toggle="modal" data-target="#modalEditar"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Luis</td>
      <td>[email protected]</td>
      <td>
        <button type="button" class="btn btn-warning btn-sm edit" data-toggle="modal" data-target="#modalEditar"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
    </tr>
  </table>
</div>

<div class="modal fade" id="modalEditar">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Editar Registro</h4>
      </div>
      <div class="modal-body">
        <input type="text" id="nomeEditar">
        <input type="text" id="emailEditar">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" id="confEditar" disabled>Editar</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>
</div>

Answer 1

The problem is that you add event headphones to each click with .focus and .focusout and he’s piling up and running around.

I suggest you change the logic of the code to something like this:

(function($nomeEditar, $emailEditar, $confEditar) {
  var _nome, _mail;
    $($nomeEditar, $confEditar).on('input', function() {
      var mudou = _nome != $nomeEditar.val() || _mail != $emailEditar.val();
      console.log('O valor mudou?', mudou ? 'SIM' : 'NÃO');
      $('#confEditar').attr('disabled', !mudou);
    });


  $('body').on("click", ".edit", function() {
    $('#confEditar').attr('disabled', 'disabled');
    _nome = $(this).parents('tr').find('td').eq(1).text();
    _mail = $(this).parents('tr').find('td').eq(2).text();
    $nomeEditar.val(_nome);
    $emailEditar.val(_mail);
  });
  
})($('#nomeEditar'), $('#emailEditar'), $('#confEditar'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
  <table class="table table-hover table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nome</th>
        <th>Email</th>
        <th>Ações</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>Carlos</td>
      <td>[email protected]</td>
      <td>
        <button type="button" class="btn btn-warning btn-sm edit" data-toggle="modal" data-target="#modalEditar"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Cesar</td>
      <td>[email protected]</td>
      <td>
        <button type="button" class="btn btn-warning btn-sm edit" data-toggle="modal" data-target="#modalEditar"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Luis</td>
      <td>[email protected]</td>
      <td>
        <button type="button" class="btn btn-warning btn-sm edit" data-toggle="modal" data-target="#modalEditar"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
    </tr>
  </table>
</div>

<div class="modal fade" id="modalEditar">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Editar Registro</h4>
      </div>
      <div class="modal-body">
        <input type="text" id="nomeEditar">
        <input type="text" id="emailEditar">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" id="confEditar" disabled>Editar</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>
</div>