Jquery onkeypress ENTER

Question

I have a table that when you double-click on one of its fields it becomes an input and this input, when I press enter, becomes a table field again, but sometimes it doesn’t work right away, I have to click the input and then press enter. I wish I could click on the cell of the table, it turn an input, I change the information, give enter and already was.

My code JS:

function updateFabricante(op) {
    let fabricante = $(`#fabricante${op}`).text() || $(`#fabricante`).val()

    $(`#fabricante${op}`).dblclick(function(){
        $(this).html(`<input type="text" required name="fabricante" id="fabricante" value="${fabricante}">`);
        $(`#fabricante`).focus();
    });

    $(`#fabricante`).on('keypress',function(e) {
        if(e.which === 13) {
            let fabricante = $(`#fabricante`).val();
            $(`#fabricante${op}`).html(fabricante);
            return false;
        }
    });
}

(Explanation to expedite)

Where

op: Specifies which cell I am selecting, are varied, from 0 to n

manufacturer${op}: ID of the field I selected

manufacturer: input ID

Answer 1

I created a table to exemplify the Jquery code I adapted. I believe it works for your case only remaining to change the selector for your scenario.

/* Usamos $(document).ready(...) ou $(...) para garantir que todas as 
 * instruções escritas sejam aplicadas após todos os elementos 
 * do DOM (HTML) estiverem prontos para serem manipulados.
 */
$(function() {
/* Adicionando o evento de double click em todos os elementos td
 * que são filhos de qualquer elemento table.
 */
$('table td').dblclick(updateText); //Atribuindo a função updateText ao evento

/* Adicionando o evento de keypress nos elementos que tenham
 * a classe fabricante e que sejam filhos de qualquer elemento table.
 */
$('table').on('keypress', '.fabricante', function(e) {
  const key = e.which || e.keyCode;
  if (key === 13) {
    const fabricante = $(this).val();
    $(this).replaceWith('<td>' + fabricante + '</td>'); //Trocando o elemento atual (input) por um elemento td
    $('table td').dblclick(updateText); //Adicionando o evento de double click no novo elemento td criado
  }
});

function updateText() {
  $(this).off("dblclick"); //Desabilitando o evento de double click no elemento input
  const text = $(this).text();
  $(this).replaceWith('<input type="text" required name="fabricante" class="fabricante" value="' + text + '">');
  $('.fabricante').focus();
};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Idade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Flávio</td>
      <td>42</td>
    </tr>
    <tr>
      <td>João</td>
      <td>15</td>
    </tr>
  </tbody>
</table>