How to edit and update <td> value when double click Jquery

Question

I have written my code such that when user double clicks on a <td> element I am:

• appending am <input> of type="text"
• adding a value to it and update it if the user clicks on enter

Here is the my problem:
If user double clicks on <td> and clicks on another <td> without pressing enter, I need the initial <td>'s <input> to be reset to previous value.

// Selecting the table <th> odd elements
$("#div table td").dblclick(function(){
    var currentEle = $(this);
    var value = $(this).html();
    updateVal(currentEle, value);
});

function updateVal(currentEle, value)
{
    $(currentEle).html('<input class="thVal" type="text" value="'+value+'" />');
    $(".thVal").focus();
    $(".thVal").keyup(function(event){
        if(event.keyCode == 13){
            $(currentEle).html($(".thVal").val().trim());
        }
    });

    $('body').not(".thVal").click(function(){
        if(('.thVal').length != 0)
        {
            $(currentEle).html($(".thVal").val().trim());
        }
    });
}

Please help me. I don't want to use jeditable datatable.

Answer 1

Here in your case you need .stopPropagation(): http://jsfiddle.net/jFycy/

$(function () {
    $("#div table td").dblclick(function (e) {
       e.stopPropagation();      //<-------stop the bubbling of the event here
       var currentEle = $(this);
       var value = $(this).html();
       updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {
  $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
  $(".thVal").focus();
  $(".thVal").keyup(function (event) {
      if (event.keyCode == 13) {
          $(currentEle).html($(".thVal").val().trim());
      }
  });

  $(document).click(function () { // you can use $('html')
        $(currentEle).html($(".thVal").val().trim());
  });
}

Instead doing click on body do the event on document or html which is the parent elem of all others elems.

Answer 2

Fixed the last answer. by checking who triggered the event i can prevent the double click issue on the input.

Also, with the .off('click') you dont have the problem where every td you updated before changes with the last one.

$(function () {
    $(".inner").dblclick(function (e) {
        if($(event.target).attr('class')!="thVal")
            {
                e.stopPropagation();
                var currentEle = $(this);
                var value = $(this).html();
                updateVal(currentEle, value);
        }
    });
});

function updateVal(currentEle, value) {
    $(document).off('click');
    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {

            $(currentEle).html($(".thVal").val());
        }
    });

    $(document).click(function () {

            if($(event.target).attr('class')!="thVal")
            {
                $(currentEle).html($(".thVal").val());
                $(document).off('click');
            }

    });

}