jquery show hide problems using a select box/dropdown

Question

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... in the image below were looking at sales:

HTML:

<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.

<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():

//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().

Now, when i click on the text it's firing for both the drop down and the datepicker randomly pops up too.

 <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_est_date(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_due_date(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_next_date(); ?>
                        </span>
                    </td>

It's being a bit quirky because of the dtpick class being touch as well. ack!

Answer 1

Since it is a <select> element, .focusout() will do just fine.

$('.look').click(function(){
    $(this).hide();
    $('.touch').show().focus();
});

$('.touch').focusout(function(){
   $(this).hide();
   $('.look').show();
});

---

If it's firing multiple element with the same class, you just need a better selector. I noticed there are set of '.look' and '.touch' for each <td>. You can use .siblings() to find the element on the same parent <td> only.

$('.look').click(function(){
    $(this).hide();
    $(this).siblings('.touch').show().focus().focusout(function(){
        $(this).hide();
        $(this).siblings('.look').show();
    });
});

I've updated the fiddle as well