The jquery .Keypress Event is not being activated

Question

The jquery .Keypress Event is not being activated

Navigation

#1 by (3 votes)

0

In the table when pressing the enter in place of activating the javascript event is 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);
    }
});
}

javascript html jquery

asked by anonymous 12.03.2018 / 18:05

1 answer

Remove "." "/" and "-" from varchar in select How to leave the rod with relative position and at the bottom of the page at least?

score 3 · Accepted Answer

The way you are doing, you are adding the keypress event to an element of the table. This is not possible.

To correct move the keypress event out of the click event of the td element and add the input element name, identifier, or class , eg

$("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><inputtype="text" /></td>
  </tr>
</table>

Or, add the find method to fetch 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><inputtype="text" /></td>
  </tr>
</table>

If you are working with dynamic elements, you can use the jQuery.on method. Every time an event trigger occurs, jQuery will check if 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><tdcontentEditable="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(); in event keypress