jquery - jQuery show hide要素、テキストをdblclickすると、編集可能なドロップダウンが表示されます

Question

ただし、気が変わってドロップダウンを編集したくない場合は、編集モードのままになります。閉まりません。ページの他の場所をクリックするたびに消えるようにしています。

考えをスライドさせたくありません。今のところ、テキストをダブルクリックすると、テキストの代わりに表示されます。以下のjsfiddleのように消えてほしいだけです。

これに似たもの：

http://jsfiddle.net/TEyHC/10/

これが私のコードです：

シンプルな html ドロップダウン選択:

<td class="edit">
<select class="touch" style="display: none;">
<option value="13">opers</option>
<option value="1">Customer Service</option>
<option value="2">DC</option>
<option value="3">Ecommerce</option>
<option value="4">Finance/Accounting</option>
<option value="5">Human Resources</option>
<option value="6">Inbound Logistics</option>
<option value="7">Information Systems</option>
<option value="14">Management</option>
<option value="8">Marketing</option>
<option value="9">Merchandising</option>
<option value="10">Property</option>
<option value="11">Rebuying</option>
<option value="12">Sales</option>
</select>
<span class="look">DC</span>
</td>

<td class="editing" data-oldvalue="13">
<select class="touch" style="display: inline-block;">
<option value="13">opers</option>
<option value="1">Customer Service</option>
<option value="2" selected="selected">DC</option>
<option value="3">Ecommerce</option>
<option value="4">Finance/Accounting</option>
<option value="5">Human Resources</option>
<option value="6">Inbound Logistics</option>
<option value="7">Information Systems</option>
<option value="14">Management</option>
<option value="8">Marketing</option>
<option value="9">Merchandising</option>
<option value="10">Property</option>
<option value="11">Rebuying</option>
<option value="12">Sales</option>
</select>
<span class="look" style="display: none;">DC</span>
</td>

jquery 関数:

function back_to_look() {
    $('td.editing ,td.edit.new').each(function() {
        $(this).children('.look').show();
        $(this).children('.touch').hide();
        if (!$(this).hasClass('edit')) {
            $(this).addClass('edit');
        }
        if ($(this).hasClass('editing')) {
            $(this).removeClass('editing');
        }
    });
}

function td_to_touch(td) {
    var theTouch = td.children('.touch');
    var theLook = td.children('.look');
    var oldVal = theLook.text().trim();

    td.addClass('editing');
    td.removeClass('edit');
    theLook.hide();
    theTouch.show();

    //save the existing value so it can be compared to when the "change" event is fired on the element
    td.attr('data-oldvalue', theTouch.val());

    if (theTouch.is('select')) {        
        theTouch.children('option:contains(' + oldVal + ')').attr('selected', 'selected');
    } else {
        theTouch.val(oldVal);
    }
}


$('td.edit' + suffix).dblclick(function(event) {
        //make this the only TD in "editing" mode
        event.preventDefault();
        back_to_look();        
        td_to_touch($(this));
    });




String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};

var myTextExtraction = function(node)  
{
    var elem = $(node);
    var theVal = null;

    if (elem.hasClass('edit')) {
        elem.children().each(function() {
            if ($(this).css('display') != 'none') {
                theVal = $(this).val();
            }
        });

    } else {
        theVal = elem.text();
    }

    console.log(theVal);

/*
    var c = node.childNodes.length;

    if (c == 1) {
        theVal = node.innerHTML.trim();
    } else if (c == 5) {
        theVal = node.childNodes[3].innerHTML.trim();
    }

    //console.log(theVal);
    return theVal;
*/
} 

どんな助けでも大歓迎です。