Editable Plugin

HTML

<div class="wrapper">
    <span id="old-content">old span plugin</span>
    <span id="old_fire_count"></span>
</div>

<div class="wrapper">
    <span id="new-content">new span plugin</span>
    <span id="new_fire_count"></span>
</div>

CSS

.wrapper {
    padding: 1em;
}

JavaScript

//plugin to make any element text editable
oldcounter = 0;
newcounter = 0;

// new plugin
$.fn.extend({
  editable2: function() {
    var that = this,
        $edittextbox = $('<input type="text"></input>').css('min-width', that.width()),
        submitChanges = function() {
          that.html($edittextbox.val());
          that.show();
          that.trigger('editsubmit', [that.html()]);
          $(document).off('click', submitChanges);
          $edittextbox.detach();
        },
        tempVal;
    $edittextbox.click(function(event) {
      event.stopPropagation();
    });

    that.dblclick(function(e) {
      tempVal = that.html();
      $edittextbox.val(tempVal).insertBefore(that).off("keypress").on('keypress', function(e) {
        if ($(this).val() !== '') {
          var code = (e.keyCode ? e.keyCode : e.which);
          if (code == 13) {
            submitChanges();
          }
        }
      });
      that.hide();
      $(document).one("click", submitChanges);
    });
    return that;
  }
});

//implement plugin
$('#new-content').editable2().on('editsubmit', function (event, val) {
    console.log('text changed to ' + val);
    $("#new_fire_count").html(++newcounter);
});






// adamb's
$.fn.extend({
	editable: function () {
		$(this).each(function () {
			var $el = $(this),
			$edittextbox = $('<input type="text"></input>').css('min-width', $el.width()),
			submitChanges = function () {
				if ($edittextbox.val() !== '') {
					$el.html($edittextbox.val());
					$el.show();
					$el.trigger('editsubmit', [$el.html()]);
					$(document).unbind('click', submitChanges);
					$edittextbox.detach();
				}
			},
			tempVal;
			$edittextbox.click(function (event) {
				event.stopPropagation();
			});

			$el.dblclick(function (e) {
				tempVal = $el.html();
				$edittextbox.val(tempVal).insertBefore(this)
                .bind('keypress', function (e) {
					var code = (e.keyCode ? e.keyCode : e.which);
					if (code == 13) {
						submitChanges();
   ...