title: How to edit the td value when double click on it
body: <p>I want to edit the td value of particular id when i double click on it. I wrote the logic. In below code 'get()' function will return 10 status which is assigned to a table td. If i double click on the any status I need feature of in-place editing and saving. But I don't know why it is not working. Please anyone help me.</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;
      &lt;body&gt;
      &lt;div id="body" &gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
      &lt;script&gt;
  
  
                      $(document).ready(function(){
  
                      var table='&lt;table&gt;';
                          table += '&lt;tr&gt;&lt;th style=""&gt; Status&lt;/th&gt;&lt;/tr&gt;';
                          table += '&lt;/table&gt;&lt;/br&gt;';
  
                      $("#body").append(table);
                      var $tbody = $('&lt;tbody&gt;').appendTo('#body table:last');
                      $.ajax({
                      type : 'POST',
                      url : '@routes.Application.get()',
                      data : {
                      itemupc : item[0]
                      },
                      beforeSend:function()
                      {   
  
                      }, 
                      success : function(items) {
  
                      $.each(items, function(j, itemsdetails) {
  
  
  
                 if(itemsdetails[3]=="R")
  
                      $tbody.append('&lt;tr&gt;&lt;td  id="my'+itemsdetails[0]+'" class="editableTD"&gt;0&lt;/td&gt;&lt;/tr&gt;');
  
                                          }); 
  }    
      });
                 $("#item_content").on('dblclick','.editableTD',function(e){ //assign event to editableTD class
                      e.stopPropagation();
                      var currentID=$(this).attr("id"); //grab the current id instead
                      var currentValue= $(this).html();
                      inlineEditSave(currentID,currentValue);
                  });
                  function inlineEditSave(currentElement,currentValue)
                      {
                      //$(currentElement).html('&lt;i class="fa-li fa fa-spinner fa-spin"&gt;&lt;/i&gt;');
                          $(currentElement).html('&lt;input type="text" class="thVal" value="' + currentValue + '" /&gt;');
                          $(".thVal").focus();
                          $(".thVal").keyup(function (event) {
                              if (event.keyCode == 13) {
                                  $(currentElement).html($(".thVal").val().trim());
  
                              }
                          });
               $(document).click(function () {
  
                      $(currentElement).html($(".thVal").val().trim());
  
              });
      }
                      });
  
              &lt;/script&gt;
  </code></pre>