kumar kumar - 2 months ago 25
CSS Question

editable table cell in jquery



$('#example tbody').on('click', 'td.actualweight', function(e) {

if (!$('.thVal1', this).length)

$(this).html(function(i, v) {
return '<input class="thVal1" type="text" value="' + v + '" />'
$(".thVal1").focus();

});
}).on({
// bind keyup event
'keyup': function(event) {

// on enter key update the content
if (event.keyCode == 13) {
$(this).parent().html($(this).val().trim());
}
},
'blur': function() {
actualweight = $(".thVal1").val();
// if focus out the element update the content with iput value
$(this).parent().html($(this).val().trim());
}
}, '.thVal1');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>





When I click on td TextBox gets displayed. If I click again text gets focus. However, TextBox should get focus on the first click only.

Answer

Why do you put code after a return statement?

I think you should change it to

$(this).html(function(i, v) {
  return '<input class="thVal1" type="text" value="' + v + '" />'
  //$('.thVal1').focus();
});
$('.thVal1').focus();