I added contenteditable prop in the table. I am getting data by using keydown event, when user hit "Enter" it takes the new input and blur the area. But user also can click anywhere except from the input area to blur.(this is contenteditable feature). And I can not listen this action. How can I create event listener like keydown for this action.
This works for "Enter", but not click
<html>
<head></head>
<body>
<table id="table">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<th>#1</th>
<td contenteditable="true">Editable1</td>
<td contenteditable="true">Editable2</td>
</tr>
</tbody>
</table>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</body>
</html>
$('#table tbody tr').keydown(function (event){
enter = event.which == 13,
el = event.target;
if(enter){
el.blur();
console.log("entered");
console.log($(this).find(':nth-child(2)').html());
console.log($(this).find(':nth-child(3)').html());
}
});