I have a word inside of a div. that's part of a drop down but the drop down is hidden, the specific focus is on "DC" right now:

HTML:

HTML Code:
<td class="edit">
<select class="touch" style="display: none;">
<option value="11">Rebuying</option><option value="12">Sales</option></select>
<span class="look">DC</span>
</td>
After you click on the word "DC" a drop down select appears. Notice the class changed from edit to editing.

HTML Code:
<td class="editing" data-oldvalue="13">
<select class="touch" style="display: inline-block;">
<option value="11">Rebuying</option><option value="12">Sales</option></select>
<span class="look" style="display: none;">DC</span>
</td>
Here's my function for show() hide():

Code:
//allow flipping between "look" and "touch" mode for all editable fields
        $('td.edit' + suffix).click(function(event) {
            //make this the only TD in "editing" mode
            event.preventDefault();
            back_to_look();        
            td_to_touch($(this));
        });

        var mouse_is_inside = false;

        $(document).ready(function()
        {
            $('td.edit').hover(function(){ 
                mouse_is_inside=true; 
            }, function(){ 
                mouse_is_inside=false; 
            });

            $("body").click(function(){ 
                if(! mouse_is_inside) $('.touch').hide();
                back_to_look();
            });
        });

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);
    }
}
The first part works okay, when i click on the word "DC" the drop down appears... and when i click outside the div back into the body it hides. That works fairly good, the problem is when the drop down select box is showing and i click on it to make a selection it disappears before i can make my selection because i'm using the mouseup() function.

I need people to be able to make a selection and than after that when they click outside of the div it disappears.

I've tried using .live, on(click, function()) and just about everything. Please any help would be greatly appreciated. Thank you.

SYNOPSIS: The drop down won't stay open so i can make a selection because i'm using mouseup().