title: Edit on site with Javascript
body: <p>I have a school assignment that I would love to have a on site edit admin panel.
  I coded this but I just cant get it to work properly, as every time I double click in one and then out it replaces the value with the previous value. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(function() {
          var bound = $("p").bind("dblclick", function(event) {
  
              event.stopPropagation();
              var currentEle = $(this);
              var value = $(this).html();
              edit(currentEle, value);
          });
      });
  
      function edit(currentEle, value) {
          $(currentEle).html('&lt;input class="tedit" type="text" value="' + value + '" /&gt;');
          $(".tedit").focus();
  
          $(".tedit").keyup(function(event) {
              if (event.keyCode == 13) {
                  currentEle.parent('p').html($(this).val().trim());
              }
          });
  
          $(document).click(function() {
              var value1234 = $(".tedit").val().trim();
              $("p").removeClass();
              currentEle.html(value1234);
  
          });
      }
  
  &lt;/script&gt;  
  </code></pre>
  
  <p>Here is the jsfiddle <a href="http://jsfiddle.net/x6e16d3n/3/" rel="nofollow">http://jsfiddle.net/x6e16d3n/3/</a></p>