Event . jquery Keypress is not being enabled

Question

In the table when pressing enter instead of activating the javascript event this being inserted a break line, ie the text function of enter not the event.

            // Função
            $(function() {

                //Função click na celula
                $('td').click(function() {
                    //Salva o conteudo da celula							
                    var conteudoOriginal = $(this).text();

                    //$(this).html("<input type='text' value='" + conteudoOriginal + "' />");

                    //Função toggleClass Troca as classes								
                    $(this).toggleClass("Comfoco");
                    // Salva a edição ao apertar enter							
                    $(this).keypress(function(event) {
                        if (event.which == 13) {
                            conteudoOriginal = $(this).text();
                            $(this).toggleClass("teste2");
                        }
                    });
                    // Ao perde o foco retira a classe vermelha							
                    $(this).blur(function() {
                        $(this).toggleClass("teste2");
                        $(this).text(conteudoOriginal);
                    });
                    //
                });
            });
        }
    },
    error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError);
    }
});
}

Answer 1

The way you’re doing, you’re adding the event keypress in a table element. This is not possible.

To fix move the event keypress out of the event click of the element td and add the name, identifier or class of the input element (input), for example:

$("input").keypress(function(event) {
  if (event.which == 13) {
    conteudoOriginal = $(this).text();
    $(this).parent().toggleClass("teste2");
  }
});

td.teste2 {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" /></td>
  </tr>
</table>

Or add the method find to get the input and then add the click event, for example:

$("td").click(function() {
  $(this).find("input").keypress(function(event) {
    if (event.which == 13) {
      conteudoOriginal = $(this).text();
      $(this).parent().toggleClass("teste2");
    }
  });
});

td.teste2 {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" /></td>
  </tr>
</table>

If you are working with dynamic elements, you can use the method jQuery.on. Every time there is the trigger of an event, the jQuery will check if the child elements have a function for that event, for example:

$("table").on("keypress", "td", function(event) {
  if (event.which == 13) {
    conteudoOriginal = $(this).text();
    $(this).toggleClass("teste2");
    
    console.log( $(this).text() );
    
    event.preventDefault();
  }
});

$("button").click(function() {
  $("table tbody").append("<tr><td contentEditable=\"true\">Clique aqui para editar</td></tr>");
});

td.teste2 {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td contentEditable="true">Clique aqui para editar</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><button>Add campo</button></td>
    </tr>
  </tfoot>
</table>

To avoid the action of a key when pressed, use event.preventDefault(); at the event keypress