Select menu loses focus
<p>When clicking "Click Me", the text turns into a select menu. When changing the select menu, it updates the text.</p>

<p>Last thing I need to do is if the select menu loses focus (i.e. something other than the select menu is clicked), revert back to the original text. How do I do this?</p>

<p>Thank you</p>

<p><a href="http://jsfiddle.net/tBRf8/2/" rel="nofollow">http://jsfiddle.net/tBRf8/2/</a></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
&lt;head&gt; 
&lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /&gt; 
&lt;title&gt;Select Clones&lt;/title&gt;
&lt;style type="text/css"&gt;
.hide {display:none;}
&lt;/style&gt;

&lt;script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"&gt;&lt;/script&gt; 
&lt;script type="text/javascript"&gt;

$(document).ready(function(){

    $('#add').click(function(){
        $('#my-table tbody').append($("#row-clone").clone(true).removeAttr('id'));
    })

    $("#my-table td.edit")
    .on("click", "span", function(){
        var $t    = $(this),
        $html = $t.parent(),
        role  = $t.text();
        $html.html($("#select-clone").clone(true).removeAttr('id').removeAttr('class').focus().blur(function() {alert('Handler for .blur() called.')}));
        //$html.html($("#select-clone").clone(true).removeAttr('id').removeAttr('class'));
    })
    .on("change", "select", function() {
        var $t = $(this),
        val   = $('&lt;span&gt;').html($t.find(':selected').html());
        $t.parent().html(val);
    });

    //$('#select-clone').blur(function() {alert('Handler for .blur() called.')});
    //$('#select-clone').focusout(function() {alert('Handler for .focusout() called.')});

});

&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;table id="my-table"&gt;
  &lt;thead class="hide"&gt;
    &lt;tr id="row-clone"&gt;&lt;td&gt;&lt;/td&gt;&lt;td class="edit"&gt;&lt;span&gt;Click Me&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td class="edit"&gt;&lt;span&gt;Click Me&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td class="edit"&gt;&lt;span&gt;Click Me&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td class="edit"&gt;&lt;span&gt;Click Me&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;br /&gt;
&lt;select id="select-clone" class="hide"&gt;
&lt;option value="1"&gt;One&lt;/option&gt;
&lt;option value="2"&gt;Two&lt;/option&gt;
&lt;option value="3"&gt;Three&lt;/option&gt;
&lt;/select&gt;

&lt;button id="add"&gt;Add&lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
