Comparison being repeated gradually in different registers

Question

Comparison being repeated gradually in different registers

Navigation

#1 by (2 votes)

2

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, it opens the modal with the input's fields, and JavaScript something changed to enable the confirm edit button.

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

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

Could you help me?

Follow the code below:

$('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><scriptsrc="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>

javascript jquery

asked by anonymous 29.09.2017 / 19:30

1 answer

C stack, problem with output dropdown-menu does not work Bootstrap

score 2 · Accepted Answer

The problem is that you add event headphones with each click to the same element with .focus and .focusout and it will accumulate and running all.

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><scriptsrc="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>