0

Na tabela ao pressionar o enter no lugar de ativar o evento javascript esta sendo inserido uma quebra linha, ou seja a função de texto do enter não o evento.

            // 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);
    }
});
}

0

1 Resposta 1

3

Da forma que você está fazendo, você está adicionando o evento keypress em um elemento da tabela. Isso não é possível.

Para corrigir mova o evento keypress para fora do evento click do elemento td e adicione o nome, identificador ou classe do elemento de entrada (input), por exemplo:

$("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>

Ou ainda, adicione o método find para buscar o input e depois adicionar o evento de clique, por exemplo:

$("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>

Caso você esteja trabalhando com elementos dinâmicos, você pode utilizar o método jQuery.on. Toda vez que houver o gatilho de um evento, o jQuery irá verificar se os elementos filhos tem uma função para esse evento, por exemplo:

$("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>

Para evitar a ação de uma tecla ao ser pressionada, utilize event.preventDefault(); no evento keypress

4
  • No meu caso eu utilizo <td contenteditable> no lugar de imput isso afeta em algo ? 12/03/2018 às 18:30
  • @mateuslacerda não muda. Editei minha resposta. Alterei um exemplo de input para td 12/03/2018 às 18:35
  • Cara vc foi extremamente legal virei seu fá sou iniciante nessa linguagem vc me ajudou mt com uma resposta bastante didática 12/03/2018 às 18:52
  • 1
    Caso ache que está respondida clique no sinalzinho verde abaixo da pontuação da pergunta para marcar como respondida. 12/03/2018 às 19:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .